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

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.

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

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

1 个解决方案

#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.

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

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

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

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:

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

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?

我喜欢Javascript,因为它不会混乱我的CSS代码,并且如果浏览器兼容则不会执行。好于百分比单位,对吧?

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

希望这个(或其中的一个版本)可以帮助您完成项目!

#1