为什么 iOS 7 Safari for iPad 的横向模式存在 20px 高度差异？

iOS 7 Safari 横向布局差异：innerHeight 与outerHeight

在 iPad 版 iOS 7 Safari 中，Web 应用程序会出现一个特殊问题：利用 100% 高度。 window.innerHeight (672px) 和 window.outerHeight (692px) 值仅在横向模式下有所不同。这种差异会导致额外 20 像素的未使用空间，从而影响屏幕底部导航元素和绝对定位元素的布局。

为了缓解此问题，直到 Apple 解决该问题，开发人员已采取变通办法。一种方法涉及在 iOS 7 中绝对定位主体，有效地将 20 像素间隙转移到页面顶部而不是底部。不过，更有效的解决方案已经出现。

通过将主体位置设置为固定，可以规避该问题：

<code class="css">@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        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>

通过实施此解决方法，开发人员可以确保 iPad 版 iOS 7 Safari 中的正确布局行为，消除麻烦的高度差异及其对导航和定位的影响。

以上是为什么 iOS 7 Safari for iPad 的横向模式存在 20px 高度差异？的详细内容。更多信息请关注PHP中文网其他相关文章！