cross browser - JavaScript fallback for vh CSS unit not working in iOS 7 -
i've got section on website uses vh css unit height when browser landscape , <600px. done below.
#section1 { height:600px; width:100%; } @media (max-height: 599px) , (orientation: landscape) { #section1 { height:100vh; } } this works fine, ios 7 doesn't work vh unit. trying implement javascript work around. i've managed following, struggling see tell kick in @ < 600px on landscape device media query above does, ideas?
// ios7 vh fix var useragent = window.navigator.useragent; var ismobilesafari = /(iphone|ipod|ipad).+applewebkit/i.test(useragent) && (function() { var iosversion = useragent.match(/os (\d)/); // viewport units work fine in mobile safari , webview on ios 8+ return iosversion && iosversion.length>1 && parseint(iosversion[1]) < 8; })(); if (ismobilesafari) { var setsliderheight = function() { $("#section1").css('height', math.max(document.documentelement.clientheight, window.innerheight || 0) + 'px'); }; $( window ).on( "orientationchange", function( event ) { setsliderheight(); }); setsliderheight(); };
Comments
Post a Comment