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

Question

我使用的是CSS3属性，如VW VH。我需要知道不支持CSS3的旧手机浏览器的影响。我用来设置使用VH的div的高度。

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

Answer 1

我知道你的痛苦。

在不支持vw或vh的移动浏览器上，属性被忽略，默认继承块元素的宽度并在height上折叠，并且在内联块元素上，width和height都设置为折叠。

使用vw单位，为了兼容性，您可以轻松地将它们切换为％值，但百分比高度单位永远不会按预期工作。

在PhoneGap，Cordova，甚至是针对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代码，并且如果浏览器兼容则不会执行。好于百分比单位，对吧？

希望这个（或其中的一个版本）可以帮助您完成项目！