iOS 7 iPad Safari Landscape innerHeight/outerHeight布局问题

Question

我们看到iOS 7中Safari的高度为100%的Web应用程序存在问题.似乎window.innerHeight(672px)与window.outerHeight(692px)不匹配,但仅在横向模式下.最终发生的事情是,在身体高度为100%的应用程序中,您可以获得20px的额外空间.这意味着当用户在我们的应用上滑动时,导航元素会被拉到浏览器镶边后面.这也意味着位于屏幕底部的任何绝对定位的元素最终都会关闭20px.

这个问题也在这里提出了这个问题: IOS 7 - css - html height - 100%= 692px

在这个模棱两可的截图中可以看到:

我们要做的就是解决这个问题,以便在Apple修复bug之前,我们不必担心它.

这样做的一种方法是绝对仅在iOS 7中定位主体,但这几乎将额外的20px放在页面的顶部而不是底部:

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

任何帮助强迫outerHeight匹配innerHeight,或者黑客攻击以便我们的用户看不到这个问题的任何帮助都将非常感激.

Answer 1

就我而言,解决方案是将定位更改为固定:

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

Answer 2

简单,清洁的CSS-Only解决方案:

html {
     height: 100%;
     position: fixed;
     width: 100%;
   }

iOS 7似乎正确设置高度.此外,不需要调整javascript事件等等.由于您正在使用全高度应用程序,如果始终固定位置并不重要.

Answer 3

正如Terry Thorsen所说,Samuel的答案效果很好,但如果网页已添加到iOS主页,则会失败.

更直观的解决方法是检查window.navigator.standalonevar.

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

这种方式仅适用于在Safari内部打开,而不是在家中启动时.