iOS 15 Safari 浮动地址栏

Question

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

\n

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

\n

是否有指示器可以检测地址栏，知道它何时出现并知道其位置？

\n

Answer 1

Webkit（和其他）发布了新的单元，以更好地控制视口高度行为。 https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/

\n

新的视口单位就是这个解决方案：

\n

\n
• 100svh指最小可能视口高度的 100%。
\n
• 100lvh指最大可能视口高度的 100%。
\n
• 100dvh指的是动态视口高度的 100% \xe2\x80\x94 意味着该值将随着用户滚动而改变。
\n

\n

\n

Answer 2

使用环境变量将您的网页填充在底部，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 分钟开始观看）

Answer 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 设置中切换到“单选项卡模式”（地址栏位于顶部）。
• 上下滚动页面可以显示和隐藏地址栏。
• 请注意，仅当主屏幕指示器可见时（屏幕底部的白色条），该框才会有底部填充。

Answer 4

我已经成功解决这个问题的另一个解决方案（适用于 100vh）是：

min-height: 100vh; 
min-height: -webkit-fill-available;

Answer 5

浮动标签栏被认为超出了安全区域的下边缘。您可以使用 CSS 从 viewport\xe2\x80\x99s 底部获取 Safe Area\xe2\x80\x99s 插图env(safe-area-inset-bottom)。

\n

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

\n