Question

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

var input_focus = false;

Answer 1

我知道你的痛苦。

在不支持vw或vh的移动浏览器上，属性会被忽略，默认情况下继承块元素＆＃39; height上的宽度和折叠，以及width和height的内联块元素都设置为折叠。

对于vw单位，为了兼容性，您可以轻松地将它们换出％值，但百分比高度单位从不按预期工作。

在PhoneGap，Cordova，甚至是针对Android用户的网站上，我都使用了＆＃34; polyfill＆＃34; （使得不受支持的样式和＃34;工作＆＃34;的代码）与我的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代码混乱，并且如果浏览器兼容则不会执行。好于百分比单位，对吧？

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

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

1 个答案: