html - Safari for iOS 上垂直 flexbox 中的最后一个元素在横向模式下被裁剪

Question

我的应用包含一个 3 行的 flexbox 列:

<div class="app" style="display: -webkit-flex; -webkit-flex-direction: column; -webkit-justify-content: space-around;">
    <div class="question-header" style="-webkit-flex: 0 0 0;">...</div>
    <div class="question-interactive" style="-webkit-flex: 1 0 0;">...</div>
    <div class="navigation" style="-webkit-flex: 0 0 0;">...</div>
</div>

此设置适用于我们定位的所有桌面和移动浏览器(当然，当我们使用正确的前缀时)，除了 ios 的 safari 的一个奇怪错误:在 ios 的 safari 上处于横向模式时，导航栏跑出页面

在桌面浏览器或纵向模式下不会发生这种情况。这是 ios 的 safari 的已知错误吗？有人认识到我的错误吗？导航 div 似乎没有根据其内容正确计算其高度...如果有助于缩小问题范围，我很乐意分享其他详细信息/代码。

Answer 1

事实证明，ios 版 safari 有一个底栏，它打乱了 innerHeight 的计算!这不是很酷吗？!

解决方法是动态检测您是否在使用 ios 的 safari(使用 UserAgent 过滤，lmao)并有条件地提高 body 的高度以反射(reflect)页面的实际大小:

if ( UserAgent.says.it.is.iOS.Safari ) {
    $('body').css('height', window.innerHeight);
}

可以通过使用视口(viewport)的实际高度 (window.innerHeight) 减去文档报告的 clientHeight (document.documentElement.clientHeight) 来找到您需要凸起的高度差。

var delta = document.documentElement.clientHeight - window.innerHeight;

这是向我展示光的 SO:Ipad: window.height() give bad value in Safari but not in Chrome