iOS 版 Safari 上垂直弹性框中的最后一个元素在横向模式下被裁剪

Posted 2023-03-05

【中文标题】iOS 版 Safari 上垂直弹性框中的最后一个元素在横向模式下被裁剪

【英文标题】：Last element in vertical flexbox on Safari for iOS gets cropped in landscape mode

【发布时间】：2015-12-03 10:03:34

【问题描述】：

我的应用由一个 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>

此设置适用于我们针对的所有桌面和移动浏览器（当然，当我们使用正确的前缀时），除了 safari for ios 的一个奇怪错误：当 safari for ios 处于横向模式时，导航栏离开页面

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

【参考方案1】：

原来 safari for ios 有一个 底栏，它搞乱了 innerHeight 的计算！是不是很酷？！

解决方法是动态检测您是否在为 ios 使用 safari（使用 UserAgent 过滤，lmao）并有条件地增加正文的高度以反映页面的实际大小：

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

可以通过使用视口的实际高度 (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