为什么使用纵向时 Modernizr.cssvhunit 在 iOS7 中不起作用？答案

【问题标题】：Why does Modernizr.cssvhunit not work in iOS7 when using portrait orientation?为什么使用纵向时 Modernizr.cssvhunit 在 iOS7 中不起作用？
【发布时间】：2014-12-18 21:20:23
【问题描述】：

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

这是我的测试：

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

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

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

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

为什么该条件仅适用于横向？这是 Modernizr 的已知错误吗？

【问题讨论】：

标签： javascript ios modernizr viewport-units

【解决方案1】：

我没有答案，但我确实找到了替代解决方案。

我为 cssvmaxunit 添加了一个测试，该条件适用于纵向和横向。

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

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

【讨论】：

【解决方案2】：

iOS7 在视口单位方面存在问题。尤其是视口高度。 CanIUse.com 也列出了这种错误行为：

iOS7 中的部分支持是由于“vh”单元 (see workaround) 的错误行为。

http://caniuse.com/#search=viewport%20units

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

【讨论】：

【解决方案3】：

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

https://github.com/vasilisvg/crazy-vh-test/

【讨论】：