Откат JavaScript для vh CSS-модуля не работает в iOS 7
У меня есть раздел на сайте, который использует vh
Единица CSS для его высоты, когда браузер является альбомной и <600px. Это сделано, как показано ниже.
#section1 {
height:600px;
width:100%;
}
@media (max-height: 599px) and (orientation: landscape) {
#section1 {
height:100vh;
}
}
Это работает нормально, но iOS 7 не работает с vh
Блок. Поэтому для этого я пытался реализовать обход JavaScript. Мне удалось собрать следующее, но я изо всех сил пытаюсь понять, где сказать, что это всего лишь 600 мегапикселей на устройстве с альбомной ориентацией, как в моем медиа-запросе выше, есть идеи?
// 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 and 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();
};