css3 视口(viewport)高度似乎在 ipad 上不起作用

Question

如果我用 to 设置一个 div

height:85vh;

元素 id 的底部离开屏幕相当多(页面只有大约 40px 高....)

为了让它适合页面，我必须将它设置为

height:55vh;

此外，这仅适用于纵向模式，如果我将 ipad 转到横向模式，即使我刷新屏幕，它似乎仍然认为视口(viewport)是纵向的!

将 vh 设置为 85 适用于 Android 平板电脑、Windows 平板电脑和桌面浏览器(Android 和 Windows 平板电脑还会在旋转设备时调整视口(viewport)大小)。为什么 ipad 表现如此奇怪？

Answer 1

我现在也遇到了这个问题，我想在完全支持之前的临时修复将是 Javascript hack。使用 Javascript 检查视口(viewport)高度，并使用它来设置元素的高度。在平板电脑上，将有 2 个视口(viewport)高度，每个方向一个，所以我会在更改方向时重新计算。

可以在这里找到一个很好的指南:http://davidwalsh.name/orientation-change