100vh帶來的問題
在CSS中，視口單位（Viewport units）聽起來不錯。如果要設置一個元素的樣式使它佔據整個屏幕的高度，那麼你可以設置height: 100vh，這樣你就擁有一個完美的全屏元素，該元素會隨着視口的變化而調整大小！可惜的是，事實並非如此。100vh在移動瀏覽器中以一種微妙但基本的方式被破壞，使其幾乎無用。最好避免使用100vh，而應該通過javascript設置高度的方式來獲得完整的視口體驗。
核心問題是移動瀏覽器（說的就是你，Chrome和Safari）具有“有用”功能：地址欄有時可見，有時隱藏，從而改變了視口的可見大小。當視口高度變化時，這些瀏覽器沒有將100vh的高度調整爲屏幕的可見部分的高度，而是將100vh設置爲隱藏了地址欄的瀏覽器的高度（其實就是100vh高度沒變，但是地址欄那塊把內容頂出去了一塊）。結果導致：當地址欄可見時，屏幕的底部將被切斷，從而破壞了開始時100vh的目的。
如下所示：
一個更好的解決方法：window.innerHeight
解決該問題的一種方法是依靠JavaScript而不是CSS。在頁面加載時，將高度設置爲window.innerHeight可以將高度正確設置爲窗口的可見部分高度。 如果地址欄可見，則window.innerHeight將爲全屏的高度。 如果地址欄處於隱藏狀態，則window.innerHeight就是你期望的只是屏幕可見部分的高度。
在Wordsheet.io上學習時，你可以看到這一點。例如，嘗試在移動瀏覽器上打開wordsheet.io/demo/V3Y。無論地址欄是否可見，屏幕都將是視口的高度。此外，在頁面首次加載時將高度固定爲適當的大小，可以防止在使用該網站的過程中地址欄隱藏，從而帶來尷尬的屏幕調整大小體驗。
遺憾的是，在不依賴JavaScript的情況下，仍然沒有一種簡單的方法來使元素佔據整個視口高度。100vh是如此接近偉大（greatness），但考慮到它在移動設備上的侷限性，最好避免使用它。