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

Popular posts from this blog

routing - AngularJS State management ->load multiple states in one page -

python - GRASS parser() error -

Swift game error message -