网站无法在 iOS 上正确显示，是不是增加了我的视口单位？

Posted 2023-03-12

【中文标题】网站无法在 iOS 上正确显示，是不是增加了我的视口单位？

【英文标题】：Website isn't displaying on iOS properly, is it increasing my viewport units?网站无法在 iOS 上正确显示，是否增加了我的视口单位？

【发布时间】：2014-01-08 17:58:44

【问题描述】：

我有一个站点，http://www.webdesignrepo.com，在那里我经常使用 vw 和 vh。

该网站在桌面和 android 浏览器上运行良好，但在 iphone 和 ipad 上的 ios 中却出现问题。 Desktop媒体查询主要是vw和vh。一旦你缩小到

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

我唯一能想到的是它错误地计算了 vw 和 vh 单位，这很奇怪，因为 caniuse.com 说 iOS safari 6.1 及更高版本支持视口单位。

有人知道为什么会这样吗？

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

提前致谢

【参考方案1】：

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

caniuse.com 视口部分的交互模式链接到GitHub issue page 进行更详细的解释，Emil Björklund 在his blog 上用一些图表进行解释。

【参考方案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;