safe-area-inset-bottom 不适用于 ios 15 safari

Question

我正在尝试让我的网站适合我的手机屏幕。我尝试了 env(safe-area-inset-bottom) 和constant(safe-area-inset-bottom) 的许多变体，但两者总是返回 0px （我一直在使用一个名为 Inspect 的应用程序在我的 iPhone 上调试 CSS 13).

这是 github 存储库的链接。与此问题相关的所有代码都应位于

/src/app.tsx

中。如果您想亲自查看问题，这里是实时站点的链接。

更新：我一直在做一些测试，发现在纵向模式下，safe-area-inset-* 始终为 0px，但在横向模式下它按预期工作。这是否意味着 safe-area-inset-* 不是 ios 15 safari 的正确解决方案？显然，地址栏在纵向模式下遮挡了“安全区域”...

我已确保将

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

添加到我的 head 标签中，但这没有效果。有人可以解释一下如何确保我的网站不会超出 ios 15 Safari 上的底部 URL 栏吗？我附上了显示问题的手机屏幕截图：

Answer 1

我想我前几天使用

-webkit-fill-available

让它工作，尊重安全区域。

body {
    min-height: -webkit-fill-available;
}

Answer 2

如果您从

0px

获得

env(safe-area-inset-bottom)

，那么浏览器可能会按预期报告其安全区域。 iOS 上的 Safari 具有底部导航栏，可在用户滚动时以动画方式进出。此外，如果用户点击底部安全区域内的某些内容，浏览器会向上滚动页面（显示导航栏）以使页面的该区域可用，以便用户可以再次点击。这很奇怪。我相信 Safari 报告的

0px

确实是您（开发人员）在这种情况下应该处理的安全区域（无）。

如果您有一个带有

display

="standalone" 选项的 .webmanifest 文件，并点击 Safari 中的共享/导出按钮“添加到主屏幕”，则无需浏览器 UI 即可打开并查看该页面。通过在 iOS 14 和 15 模拟器上进行测试，在这种情况下，我得到了

34px

的底部安全区域。