没有正文内容的 iPad 横向上的额外正文高度 (iOS7)

Posted 2023-03-10

【中文标题】没有正文内容的 iPad 横向上的额外正文高度 (iOS7)

【英文标题】：Extra body height on iPad landscape with no body content (iOS7)

【发布时间】：2013-10-05 19:06:48

【问题描述】：

问题： 在ios7 iPad上以横向模式加载上面的URL时，有一个垂直滚动条。 没有正文内容，它正在规范正文/html 边距/填充。需要说明的是，这是我可以提供的最小测试用例，因此缺少内容和空白页。

演示：http://fiddle.jshell.net/AKRCa/show/

我尝试过的事情： 将视口设置为：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

和

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">`

其他一些信息： 我无法访问运行 iOS6 的 iPad，但我使用 browserstack 在运行 iOS6 的 iPad3 上测试了演示，并且没有滚动条，因此看来此错误仅限于 iOS7。

iPhone 纵向也没有滚动条，但 iPhone 横向有。

【问题讨论】：

是的@JoshC，这是故意的。 iPad 有一个完全没有正文内容的滚动条。这是一个完全精简的测试用例。

在 iPhone 上向下滚动页面时，iOS 7 上 Safari 中的标题和地址栏区域会缩小（以节省空间）。这不会发生在 iPad 上。我认为这可能是相关的。似乎确实有一个错误导致可用窗口大小的计算错误，因此不超过窗口高度的文档会出现令人讨厌的轻微滚动。

您是否尝试过使用“box-sizing:border-box”设置 html、body 标签？这可能值得快速测试。我还没有升级到iOS7，所以无法测试。

【参考方案1】：

好的，经过一些测试 (The result of which are here) 我已经确定了两件事：

这个错误（至少我认为是一个错误...）与 webkit-scrolling 相关，实际上并不会影响您的网站/应用程序的高度

如果您创建的是单页应用程序，则需要将此 JS 添加到其中以防止触发任何滚动事件。这也将防止弹性滚动效果和垂直滚动条问题。

document.ontouchmove = function(event)
  event.preventDefault();

JsFiddle 显示了我所做的实验。希望对您有所帮助！

【讨论】：

我有一个空白的 html 文档，令人惊讶的是 ipad 认为有足够的内容来保证垂直滚动条。这阻止了它的发生。谢谢