Откат 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();
};

0 ответов

Другие вопросы по тегам