为什么 iOS 7 Safari 横向模式下的 window.innerHeight 与 window.outerHeight 不同？

iOS 7 iPad Safari 横向布局 Bug：InnerHeight/OuterHeight 差异

在 iOS 7 Safari 中，主体高度为 100% 的 Web 应用程序在横向模式下遇到一个特殊问题。 window.innerHeight (672px) 与 window.outerHeight (692px) 不同。

这种差异会导致可视区域下方多出 20px 的空间，导致导航元素在向上滑动时隐藏在浏览器镶边后面。屏幕底部的绝对定位元素也会出现 20 像素偏移。

解决方法

要缓解此错误，您可以应用 CSS hack 来显式设置主体的高度到 672px 并绝对仅在 iOS 7 中定位它：

<code class="css">@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 672px !important;
    }
}</code>

要识别运行 iOS 7 的 iPad 设备，请使用以下脚本：

<code class="javascript">if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}</code>

通过应用此解决方法，outerHeight 将被迫匹配 insideHeight，确保您的应用程序布局在 iOS 7 Safari 横向模式下按预期运行。

以上是为什么 iOS 7 Safari 横向模式下的 window.innerHeight 与 window.outerHeight 不同？的详细内容。更多信息请关注PHP中文网其他相关文章！