iOS 15 Safari 浮动地址栏

Question

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

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

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

原文由 Nathan H 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

到目前为止，您无法真正检测到地址栏的大小，因为 env(...) inset 变量在最终版本中被删除。但！地址栏确实会影响页面上的定位。

我不确定它如何确定要移动的元素，但页面元素可以对其做出反应。例如，在移动设备上查看 twitter.com 时查看 Twitter 的导航栏。

如果你想要类似的行为⤵︎

1. 做一个 div 和 fixed 定位
2. 将它的 bottom 设置为 0

注意将固定 div 的高度设置为 100vh 因为我认为这会将其挤出地址栏的反应区域。

请任何人发表有关此问题的评论和更新，因为它经常更改。

原文由 tyirvine 发布，翻译遵循 CC BY-SA 4.0 许可协议