在移動前端上避免使用100vh單位

CSS中的視口單位聽起來很棒。 若是要設置元素的樣式以佔據整個屏幕的高度，則能夠設置height: 100vh，您擁有一個完美的全屏元素，該元素會隨着視口的變化而調整大小！ 可悲的是，事實並不是如此。 100vh在移動瀏覽器中以微妙但基本的方式被破壞，這使其幾乎無用。 最好避免100vh ，而是依靠javascript設置高度以得到完整的視口體驗。

核心問題是移動瀏覽器（我正在爲您瀏覽，Chrome和Safari）具備「幫助」功能，其中地址欄有時可見，有時隱藏，從而改變了視口的可見大小。 這些瀏覽器沒有將100vh高度調整爲視口高度變化時屏幕的可見部分，而是將100vh設置爲瀏覽器的高度，並隱藏了地址欄。 結果是，當地址欄可見時，屏幕的底部將被切除。

以下所示：

當顯示地址欄時，因爲移動瀏覽器錯誤地將100vh設置爲屏幕高度而沒有顯示地址欄，所以屏幕底部被切斷。 在上圖中，應隱藏在屏幕底部的按鈕。 更糟糕的是，當用戶首次訪問移動設備上的網站時，地址欄將在頂部可見，所以默認的體驗是破碎的體驗。

更好的解決方案：window.innerHeight

解決此問題的一種方法是依靠javascript而不是CSS。 頁面加載時，將高度設置爲window.innerHeight能夠將高度正確設置爲窗口的可見部分。 若是地址欄可見，則window.innerHeight將爲全屏的高度。 若是地址欄是隱藏的，則window.innerHeight將是屏幕上可見部分的高度，這正是您所指望的。

在Wordsheet.io上學習時，您能夠看到這一點。 例如，嘗試在移動瀏覽器上打開wordsheet.io/demo/V3Y 。 不管地址欄是否可見，屏幕都將是視口的高度。 此外，經過在頁面首次加載時將高度鎖定在適當的位置，能夠防止地址欄隱藏在使用該網站的過程當中，從而帶來尷尬的屏幕調整大小體驗。

遺憾的是，在不依賴JavaScript的狀況下，仍然沒有一種簡單的方法來使元素佔據整個視口高度。 height: 100vh 很是接近 ，但鑑於其在移動設備上的侷限性，最好避免使用它。

個人博客： http://caibaojian.com

公衆號：http://t.cn/AiuNZVZG，公衆號回覆前端，加入開發羣

掘金小冊8折優惠：http://caibaojian.com/goods