由於瀏覽器UI，CSS 100vh在移動設備上過高

Question

解決此問題的最佳方法是什麼？顯然，手機上的所有瀏覽器都有頂部的UI（地址欄等）。這增加了視口的額外高度，所以我的網站使用100vh缺少一個部分。

我假設不同的瀏覽器有不同大小的視口，由於這個原因，我可以簡單地做一些事情，比如height: calc(100vh - 50px)或者什麼高度，但是它在所有移動瀏覽器上都不匹配？

Answer 1

通常情況下，100vh高度會計算調整後的高度，這就是爲什麼當滑動地址欄的瀏覽器滑動移動頁面時，移動頁面經常會變得怪異;然而，顯然有這麼多的移動瀏覽器，你不能依靠這個。

地址欄的高度在瀏覽器中不會保持不變，所以我不會建議追加-50px。

嘗試使用window.innerheight屬性設置高度（在javascript內）。

window.onresize = function(){ 
    document.body.height = window.innerHeight; 
} 
window.onresize(); // called to initially set the height. 

原諒任何錯誤，我有一段時間沒有與JS合作過。