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

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

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

通过将主体的位置设置为固定，可以绕过这个问题：

@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');
}

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