Question

我正在尝试使用Modernizr来检测浏览器是否支持视口单元。

这是我的测试：

if(!Modernizr.cssvhunit) {
    alert('viewport units are not supported');
}

我知道iOS7不支持视口单元，所以这就是我需要回退的地方。

当我在横向iPad上的iOS7中加载页面时，会执行警报。

但是，如果我以纵向方式加载页面，我就不会看到警报。

为什么这种情况只适用于景观？这是Modernizr的已知错误吗？

Answer 1

我没有答案，但我确实想出了另一种解决方案。

我为cssvmaxunit添加了一个测试，条件在纵向和横向都有效。

// if viewport units aren't supported
if(!Modernizr.cssvhunit || !Modernizr.cssvmaxunit) {
    alert('viewport units are not supported');
}

我认为如果浏览器不支持vmax，那么它可能不支持vh。

Answer 2

iOS7在视口单元方面存在问题。特别是视口高度。 CanIUse.com还列出了这种有害行为：

iOS7中的部分支持是由于＆＃34; vh＆＃34;的错误行为造成的。单位（see workaround）。

iOS8支持视口单元完全正常，但它有一个filed bug in modernizr。 Modernizr表示iOS8 Safari不支持vhunits，即使它确实如此。但现在似乎有问题要解决这个问题。

Answer 3

我自己也有同样的问题，设法找到了一个有良好解决方案的this article。这是一个小脚本，可以检测到这个奇怪的支持中间地带并在html上放置一个类。与Modernizr完全相同