安全区域插入底部不适用于 ios 15 safari

Question

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

这是 github repo 的链接。 与此问题相关的所有代码都应位于/src/app.tsx中。 如果您想自己查看问题，这里是指向实时站点的链接。

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

我已确保将<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />添加到我的 head 标签中，但这没有效果。 Could someone please explain how I can ensure that my site doesn't go past the bottom URL bar on ios 15 Safari? 我附上了我手机上的截图，显示了这个问题：

Answer 1

我想我前几天使用-webkit-fill-available让它工作了，它尊重安全区域。

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