以下是一些基于问题的文章标题，概括了内容： 直接且信息丰富： * 为什么 iOS 7 iPad 横向模式下的 window.innerHeight 与 window.outerHeight 不同？ * 如何

iOS 7 iPad Safari 横向布局差异

在横向模式下使用 iOS 7 iPad 时，Web 应用程序会出现一个令人费解的问题，其中窗口.innerHeight 和 window.outerHeight 不对齐。这 20 像素的差异会导致导航元素被遮挡，并且屏幕底部的绝对定位未对齐。

为了解决此问题并防止其干扰用户体验，可以实施一种解决方法。在 iOS 7 中专门通过绝对定位 body 元素：

body {
    position: absolute;
    bottom: 0;
    height: 672px !important;
}

遗憾的是，这种方法只是将多余的空间转移到页面顶部，而不是解决它。已证明有效的替代解决方案是将定位修改为固定：

@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        bottom: 0;
        width:100%;
        height: 672px !important;
    }
}

此外，可以使用脚本来检测运行 iOS 7 的 iPad 设备：

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}

以上是以下是一些基于问题的文章标题，概括了内容： 直接且信息丰富： * 为什么 iOS 7 iPad 横向模式下的 window.innerHeight 与 window.outerHeight 不同？ * 如何的详细内容。更多信息请关注PHP中文网其他相关文章！