iOS 15 Safari 浮动地址栏答案

【问题标题】：iOS 15 Safari floating address bariOS 15 Safari 浮动地址栏
【发布时间】：2021-09-06 16:48:34
【问题描述】：

在 iOS 15 中，Safari 更改了地址栏的行为。它浮动在页面底部附近的某处。

这会极大地影响页面的设计和用户体验。

是否有检测地址栏的指示器，知道它何时存在并知道它的位置？

【问题讨论】：

更新：这是一个移动的目标，Apple 改变了行为。地址栏不再浮动

标签： css ios safari

【解决方案1】：

使用环境变量safe-area-inset-bottom 在底部填充您的网页，如下所示：

body {
    padding-bottom: env(safe-area-inset-bottom);
}

Jen Simmons 的本次会议讨论了如何处理 Safari 的新地址栏：https://developer.apple.com/videos/play/wwdc2021/10029/（从 16:44 开始）

【讨论】：

这是一次很棒的会议，但是关于safe-area-inset-bottom 的讨论现在已经过时了。值得关注概念，但不要尝试按照描述的方式实现。

【解决方案2】：

浮动标签栏被认为超出了安全区域的下边缘。您可以使用 env(safe-area-inset-bottom) 在 CSS 中从视口底部获取安全区域的插图。

有关在 WebKit 中支持安全区域的更多信息：https://webkit.org/blog/7929/designing-websites-for-iphone-x

【讨论】：

【解决方案3】：

这种行为发生了很大变化。我建议在您的页面中添加这样的 DIV 来玩：

<div style="background: red; color: white; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)">Hello!</div>

这将在一个紧的红色框中为您提供 Hello! 字样，并带有应用了四个安全边距。您将在此 div 所在页面的任何位置看到这些边距 - 您无需将其设为页脚或页眉。这是可视化正在发生的事情的一个很好的帮助。

截至 Safari 15 当前测试版有：

不再是浮动地址栏。
不再为env(safe-area-inset-bottom) 设置任何值以避免干扰底部地址栏。
env(safe-area-inset-bottom)设置是为了避开主屏幕指示栏。
将页面高度设置为 100vh 将阻止地址栏出现根本，除非有人点击屏幕底部的站点名称。
但是，此时在 100vh 下，项目可能会隐藏在底部栏下方。我真的希望他们能解决此问题以设置安全区域。

因此，要使红色框实际上看起来有任何填充，您必须：

在 Safari 设置中切换到“单标签模式”（地址栏位于顶部）。
上下滚动页面以显示和隐藏地址栏。
请注意，仅当主屏幕指示器（屏幕底部的白条）可见时，该框才会有底部填充。

【讨论】：