iOS 15 Safari 在键盘可见时检测浮动地址栏答案

【问题标题】：iOS 15 Safari detect floating address bar when keyboard is visibleiOS 15 Safari 在键盘可见时检测浮动地址栏
【发布时间】：2021-10-28 15:36:28
【问题描述】：

在 Safari iOS15 中，默认情况下，地址栏固定在视口底部。正如iOS 15 Safari floating address bar 解释的那样，您可以使用padding-bottom: env(safe-area-inset-bottom) 来确保内容显示在其上方。

但是，如果键盘可见，则环境变量不起作用，因为浮动地址栏显示在键盘上方，它会清除视口的底部。这可能会导致某些内容隐藏在其下方。

在 iOS 14 及更低版本或 iOS15 上，Safari 设置为在顶部显示地址栏，当文本区域处于焦点时，您可以看到提交按钮。默认iOS15不能，因为设备返回的视口高度不包括浮动地址栏。

【问题讨论】：

【解决方案1】：

我能找到的最接近的解决方案是使用 navigator.userAgent 检查是否存在 iOS 15：

console.log(navigator.userAgent.indexOf("iPhone OS 15") != -1)

但是，用户仍然可以将设置中的标签栏位置更改回顶部。

下面的截图是在 Xcode iPhone 模拟器中测试它并使用 safari 中的开发工具检查浏览器

【讨论】：

【解决方案2】：

同样的问题，visualViewport 报告高度为 534px，但红色区域仍然在 url chrome 后面，应该在 490px 左右

错误行为

正确的行为

【讨论】：

【解决方案3】：

这似乎已在 iOS 15 开发者 beta 3 中修复。

【讨论】：