如何防止内容隐藏在iOS Safari UI下

Question

我正在尝试为网络创建一个页面应用程序，到目前为止，它的进展顺利。 不幸的是，在iPhone上进行测试时，我意识到我网站内容的一部分隐藏在浏览器（Safari）的导航栏下。通常，当在网站上向下滚动UI元素会消失并为其下方的内容铺平道路时，可以正确显示并有效地使用屏幕空间，但是由于我的网站已禁用了滚动（因为我试图制作一个屏幕UI）它的一部分结束了。

我注意到这只会影响Safari，而我的应用程序甚至在移动设备上也可以很好地在其他浏览器上工作。

到目前为止，为了解决此问题，我尝试在这样的CSS上使用环境变量： 高度：CALC（100VH-ENV（Safe-Area-Inset-Bottom）），

但似乎没有任何区别。 那么我要的是：有什么方法可以防止这种情况发生，也许将网站加载到全屏上已经隐藏了浏览器的UI？

对于上下文，这是问题：

当前状态：

“当前状态”>

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

所需结果：

（我注意到我经常播放的Wordle克隆（ term.ooo ）设法实现了我想做的事情，因此必须有一种方法，但我没有通过分析他们的CSS' - '）来弄清楚这一点。

Answer 1

您必须做这样的事情：

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