VH、VW 单位和疯狂的 IOS 移动浏览器渲染

Posted 2023-03-12

【中文标题】VH、VW 单位和疯狂的 IOS 移动浏览器渲染

【英文标题】：VH, VW units and Crazy IOS Mobile Browser Rendering

【发布时间】：2014-08-11 06:35:19

【问题描述】：

我认为使用相对单位来开始我的新项目是个好主意。在我处理它时，我正在检查 chrome 仿真，以确保在这些设备上一切正常，并且看起来不错。

然后我把它推到heroku上，在我的macbook上看起来不错，但是当我真正把它加载到我的iPad上时，我想把它扔出窗外......

#bannerTop 
    position:relative;
    text-align: center;
    width:100vw;
    height:70vh;
    min-height: 70vh !important;
    max-height:70vh !important;
    background-image: asset-url('skycloudsalpha.jpg');
    background-repeat: no-repeat;
    background-position: 50% 75%;
    z-index:-1;

我正在使用 VH 设备。我怀疑这可能是问题所在？

可能还有其他一些潜在问题，但我不确定如何调试我的问题，因为在模拟器上一切正常，但在设备本身上却不行。我已经花了大约三个小时在这上面，非常感谢一些帮助。

谢谢！

【问题讨论】：

也许你的 iPad 不支持新的 css3 单元？

【参考方案1】：

您可以在caniuse.com上阅读

ios7 中的部分支持是由于“vh”单元的错误行为。

已知问题：

Chrome 不支持边框宽度、列的视口单位 间隙、变换值、框阴影或在 calc() 中直到版本 34。 iOS Safari（6 和 7）不支持边框宽度、列间距、变换值、框阴影或 calc() 中的视口单位。 如果页面已离开并在 60 秒后返回，iOS 7 Safari 会将视口单位值设置为 0。 打印模式下的 Internet Explorer 9 将 vh 解释为页面。 30vh = 30 页 当方向改变时，iOS 7 Safari 将在 vh 中设置的宽度重新计算为 vw，将在 vw 中设置的高度重新计算为 vh。

有关错误行为的更多信息

http://blog.rodneyrehm.de/archives/34-iOS7-Mobile-Safari-And-Viewport-Units.html

还有一个 polyfill https://github.com/rodneyrehm/viewport-units-buggyfill