我正試圖為web創建一個單頁面應用程序，到目前為止進展順利。 不幸的是，在iPhone上測試時，我發現我網站的部分內容隱藏在瀏覽器(Safari)的導航欄下面。通常情況下，當在網站上向下滾動時，UI元素會消失，為其下的內容讓路，以便正確顯示并有效地使用屏幕空間，但由于我的網站禁用了滾動(因為我試圖創建單屏幕UI)，它的一部分會在那里結束。

我注意到這只會影響Safari，而我的應用在其他瀏覽器上也能很好地運行，甚至在移動設備上。

到目前為止，為了解決這個問題，我嘗試在CSS上使用環境變量，如下所示: 高度:calc(100vh - env(安全區域-嵌入-底部))

但這似乎沒有任何影響。 所以我要問的是:有什么方法可以防止這種情況發生，也許全屏加載網站已經隱藏了瀏覽器的用戶界面？

對于上下文，問題是這樣的:

當前狀態:

隱藏的頁面部分(啟用滾動):

預期結果:

(此外，我注意到我經常玩的一個Wordle克隆版(term.ooo)成功地完成了我想做的事情，所以肯定有辦法，但我還沒有通過分析他們的CSS '-')找到它)

你必須這樣做:

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