网站没有在iOS上正常显示，是否增加了我的视口单元？

Question

我有一个网站http://www.webdesignrepo.com，我正在使用vw和vh。

该网站在桌面和Android浏览器上运行得非常好，但在iphone和ipad上都在iOS上乱七八糟。桌面媒体查询主要是vw和vh。一旦你达到<768px宽，我就用px单位替换了一些视口单元。

我觉得这很容易解决，我只是没有看到简单的东西。

我唯一能想到的是它不正确地计算vw和vh单位，这很奇怪，因为caniuse.com说iOS safari 6.1及以上版本支持视口单元。

任何人都知道为什么会这样？

（是的，我看到整个情况的讽刺意味）

提前致谢

Answer 1

iOS 6和7似乎首先正确计算视口高度，但在渲染页面后对vh的任何调用都会重新计算视口高度并将其添加到上一个值，从而导致页面非常高。不幸的是，这不一致，目前还没有已知的解决方法。

caniuse.com视口部分的交互模式链接到GitHub issue page更详细地解释，EmilBjörklund解释了his blog上的一些图表。

Answer 2

在iOS中，当元素内的内容发生更改时，vw或vh单元会无法正确呈现。

此网站http://mjau-mjau.com/blog/ios-vh-bug/提供了使用Javascript和iOS特定的有用解决方法。

但是，我不想使用JS并决定用em覆盖所有移动设备的vw和vh字体大小，

@media only screen and (max-device-width: 480px) {
    .caption h1{
        font-size: 6em;
    }

    .caption h2{
        font-size: 4.3em;
    }

    .caption h1:first-letter {
        font-size: 1.5em;
    } 

    .caption p {
       font-size: 1.2em;
    }
}