OGeek|极客世界-中国程序员成长平台

标题: html - iOS 版 Safari 上垂直 flexbox 中的最后一个元素在横向模式下被裁剪 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-13 10:29
标题: html - iOS 版 Safari 上垂直 flexbox 中的最后一个元素在横向模式下被裁剪

我的应用由一个 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 似乎没有根据其内容正确计算其高度...如果有助于缩小问题范围，我很乐意分享更多详细信息/代码。

---

Best Answer-推荐答案

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

解决方法是动态检测您在 ios 上的 safari(使用 UserAgent 过滤，lmao)并有条件地增加正文的高度以反射(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

关于html - iOS 版 Safari 上垂直 flexbox 中的最后一个元素在横向模式下被裁剪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32445609/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://sqlite.in/)

Powered by Discuz! X3.4