iOS 15 Safari 在键盘可见时检测 float 地址栏

Question

在 Safari iOS15 中，默认情况下，地址栏固定在视口(viewport)底部。如iOS 15 Safari floating address bar说明，您可以使用 padding-bottom: env(safe-area-inset-bottom)以确保内容显示在其上方。
但是，如果键盘可见，则环境变量不起作用，因为 float 地址栏显示在键盘上方，并且它清除了视口(viewport)的底部。这可能会导致某些内容隐藏在其下方。
这是该问题的简单演示:https://pmusaraj.github.io/ios15-bottom-bar2.html
在 iOS 14 及更低版本或在 Safari 设置为在顶部显示地址栏的 iOS15 上，当文本区域处于焦点时，您可以看到提交按钮。在默认的 iOS15 上，你不能，因为设备返回的视口(viewport)高度不包括 float 地址栏。
更新:https://bugs.webkit.org/show_bug.cgi?id=229876 上的 WebKit 错误报告

Answer 1

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

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

但是，用户仍然可以将设置中的标签栏位置更改回顶部。
下面的截图是在 Xcode iPhone 模拟器中测试它并使用 safari 中的开发工具检查浏览器