html - iOS 版 Safari 上垂直 flexbox 中的最后一个元素在横向模式下被裁剪
<p><p>我的应用由一个 3 行的 flexbox 列组成:</p>
<pre><code><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>
</code></pre>
<p>此设置适用于我们针对的所有桌面和移动浏览器(当然，当我们使用正确的前缀时)，除了 safari for ios 的一个奇怪错误:<strong>当 safari for ios 处于横向模式时，导航栏离开页面</strong></p>
<p> <img src="https://i.imgur.com/3pLCIey.png" alt="Portrait is OK"/> <br/>
<img src="https://i.imgur.com/g2II525.png" alt="Landscape is Clipped"/> </p>
<p>这不会在桌面浏览器或纵向模式下发生。这是 ios Safari 的已知错误吗？有人认出我的错误吗？导航 div 似乎没有根据其内容正确计算其高度...<strong>如果有助于缩小问题范围，我很乐意分享更多详细信息/代码</strong>。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>原来 safari for ios 有一个 <strong>底栏</strong>，它搞乱了 innerHeight 的计算!是不是很酷？!</p>
<p>解决方法是动态检测您在 ios 上的 safari(使用 UserAgent 过滤，lmao)并有条件地增加正文的高度以反射(reflect)页面的实际大小:</p>
<pre><code>if ( UserAgent.says.it.is.iOS.Safari ) {
$('body').css('height', window.innerHeight);
}
</code></pre>
<p>可以通过使用视口(viewport)的实际高度 (window.innerHeight) 并减去文档报告的 clientHeight (document.documentElement.clientHeight) 来找到您需要凹凸的高度差。</p>
<pre><code>var delta = document.documentElement.clientHeight - window.innerHeight;
</code></pre>
<p>这是让我看到光明的 SO:<a href="https://stackoverflow.com/questions/19929360/ipad-window-height-give-bad-value-in-safari-but-not-in-chrome" rel="noreferrer noopener nofollow">Ipad: window.height() give bad value in Safari but not in Chrome</a> </p></p>
<p style="font-size: 20px;">关于html - iOS 版 Safari 上垂直 flexbox 中的最后一个元素在横向模式下被裁剪，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/32445609/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/32445609/
</a>
</p>
页:
[1]