Что происходит в старых мобильных браузерах, которые не поддерживают свойства vw или vh?

Question

Я использую свойства CSS3, такие как VW VH. Мне нужно знать влияние старого мобильного браузера, который не поддерживает CSS3. Я использую, чтобы установить высоту div, используя VH.

.block{ 
    height : 50vh; 
    width : 50vw; 
} 
<div class="block"> 
     //do some thing.... 
</div> 

Answer 1

Я знаю вашу боль.

На мобильных браузерах, которые не поддерживают vw или vh, свойства игнорируются и по умолчанию наследуют по ширине элементов блока и коллапс на height, так и на встроенный блок элементов как width и height являются установлен на Свернуть.

С vw единиц, для обеспечения совместимости вы можете легко их отключить для значений%, но единицы измерения по высоте никогда работают должным образом.

В PhoneGap, Кордова, и даже мой сайт, который предназначается для Android пользователей, я использую «polyfill» (код, который делает неподдерживаемый стиль «работы») вместе с моими vw и vh единиц для поддержки Android 4.3 Jellybean и ниже:

function orient() { 
    var ua = navigator.userAgent; 
    if(ua.indexOf('droid 4.3')==-1&&ua.indexOf('droid 4.2')==-1&&ua.indexOf('droid 4.1')==-1&&ua.indexOf('droid 4.0')==-1&&ua.indexOf('droid 2.')==-1) { 

    //This version of Android supports vw and vh units! 

    } else { 

    //Polyfill! 

    var w = window.innerWidth, h = window.innerHeight; 

    //Examples: 

    elem.style.width = (w*.94)+'px'; //width: 94vw 
    elem.style.height = (h*.94)+'px'; //height: 94vh 
    elem2.style.height = (w*.5)+'px'; //height: 50vw (Opposite viewport unit! % doesn't support that!) 

    } 
    } 
    window.onresize = function() { window.setTimeout(orient,50); } 
    window.onresize(); 

Мне нравится Javascript, потому что это не загромождать мой CSS код, и не выполняется, если браузер совместим. Лучше, чем процентные единицы, не так ли?

Надеюсь, что это (или версия этого) поможет вам в вашем проекте!