Question

我打算制作非常敏感的网站。为此，我目前包括外部样式表。

但我想将它包含在那些支持视口单元（如vw）的浏览器中。

那么，我怎样才能检测到它支持与否的浏览器。

请注意：我不想包含现代化工具。

Answer 1

这是Modernizr使用的代码：

  testStyles('#modernizr { width: 50vw; }', function(elem) {
    var width = parseInt(window.innerWidth / 2, 10);
    var compStyle = parseInt((window.getComputedStyle ?
                              getComputedStyle(elem, null) :
                              elem.currentStyle).width, 10);

    Modernizr.addTest('cssvwunit', compStyle == width);
  });

所以你可以做类似的事情。只需按照以下步骤操作：

在width。

vw

检查元素的计算width以匹配视口的宽度。
如果两者相同，则您的浏览器支持vw和vh！

Snippet即将推出......

＆＃13;

$(function () {
  elemWidth = parseInt(getComputedStyle(document.querySelector("#checkVw"), null).width, 10);
  halfWidth = parseInt(window.innerWidth / 2, 10);
  $("#checkVw").html("Your browser" + ((elemWidth == halfWidth) ? "" : "does not ") + " support VW and VH");
});

＆＃13;

#checkVw { width: 50vw; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="checkVw"></div>

＆＃13;

我用IE 7检查过它搞砸了！ ;)

如何检测浏览器是否支持视口单元？

1 个答案: