在不支持vw或vh属性的旧版移动浏览器中会发生什么？

Question

I am using the CSS3 properties such as VW VH. i need to know the impact of old mobile browser which doesn't support the CSS3. i am using to set the height of the div using the VH.

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

Answer 1

I know your pain.

On mobile browsers that don't support vw or vh , the properties are ignored and default to inherit on block elements' width and collapse on height , and on inline-block elements both width and height are set to collapse .

With vw units, for compatibility, you can easily switch them out for % values, but percentage height units never work as expected.

In PhoneGap, Cordova, and even my website which targets Android users, I use a "polyfill" (code that makes the unsupported styling "work") along with my vw and vh units to support Android 4.3 Jellybean and below:

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();

I like Javascript because it doesn't clutter my CSS code, and doesn't execute if the browser is compatible. Better than percentage units, right?

Hope this (or a version of this) helps you on your project!