如何防止内容被iOS Safari UI遮挡

Question

我正在尝试创建一个适用于Web的单页面应用程序，目前进展顺利。不幸的是，在iPhone上测试时，我意识到我的网站内容的一部分被隐藏在浏览器（Safari）的导航栏下面。通常，当在网站上向下滚动时，该UI元素会消失并为其下方的内容正确显示和有效地使用屏幕空间，但由于我的网站已禁用滚动（因为我正在尝试制作单屏UI），因此其中的一部分会出现在底部。

我注意到这只影响Safari，我的应用程序在其他浏览器上甚至在移动设备上都能完美运行。

到目前为止，为了解决这个问题，我尝试使用CSS环境变量，如下所示： height: calc(100vh - env(safe-area-inset-bottom)) 但它似乎没有任何区别。 那么我的问题是：有没有办法防止这种情况发生，也许在全屏加载网站时隐藏浏览器的UI？

以下是问题的背景：

页面中被隐藏的部分（启用滚动）：

期望的结果：

此外，我注意到我经常玩的一个Wordle克隆版(term.ooo)已经成功实现了我想做的事情，所以肯定有方法，但我还没有通过分析他们的CSS找到它('-')

- Tarcísio Surdi

---

你找到答案了吗？ - Christian

Answer 1

你需要做类似这样的事情：

html, body {
    height: 100vh;  /* standard definition (as fallback) */
    height: 100dvh; /* dynamic vh will make the trick on iOS */
}

- AlbertSY

---

我遇到了同样的问题，这个解决方案对我来说非常有效，谢谢！ - Tomas Kohl