我正在尝试为Web创建一个单页应用程序，到目前为止，它进行得很顺利。不幸的是，当我在iPhone上测试它时，我意识到我的网站的部分内容隐藏在浏览器的导航栏（Safari）下面。通常情况下，当在网站上向下滚动时，UI元素消失，并为下面的内容让路，以便正确显示并有效地使用屏幕空间，但由于我的网站禁用了滚动（因为我试图制作一个单屏幕UI），它的一部分在那里结束。
我注意到这只会影响Safari，我的应用程序在其他浏览器上运行得很好，甚至在移动的上也是如此。
到目前为止，为了解决这个问题，我尝试在CSS上使用环境变量，如下所示：height: calc(100vh - env(safe-area-inset-bottom))
但似乎没什么区别。所以我要求的是：有什么方法可以防止这种情况发生，也许全屏加载网站已经隐藏了浏览器的UI？
在上下文中，问题是：

当前状态：

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

预期结果：

(Also，我注意到我经常玩的Wordle克隆（term.ooo）已经成功地完成了我想做的事情，所以一定有一种方法，但我还没有通过分析他们的CSS“-”来弄清楚。