CSS3常見問題：100vh在移動瀏覽器中不是固定的，恆定的

站長博客：https://www.pipipi.net/

前言
加載頁面時全部瀏覽器都有一個頂級菜單（例如顯示地址欄），當您開始滾動頁面時，該菜單會向上滑動。這個時候該菜單會變小，因爲100vh僅在視口的可見部分計算，所以會致使全部佈局都從新繪製並從新調整，對用戶體驗的糟糕跳躍效果。

參見圖以下，明顯可見第二個菜單欄變小了。

正文
不幸的是這個問題是一直有意存在的.....
這是一個衆所周知的問題（至少在safari mobile中是存在的），這是有意的，由於它能夠防止其餘問題。 參見Benjamin Poulain回覆webkit bug:

這徹底是故意的。咱們須要花費大量的工做才能達到這個效果。 CSS3常見問題：100vh在移動瀏覽器中不是固定的，恆定的-創客青年博客

基本問題是：滾動時可見區域會動態變化。若是咱們相應地更新CSS視口高度，咱們須要在滾動期間更新佈局。不只如此看起來像狗屎，但在大多數頁面中以60
FPS執行此操做幾乎是不可能的（60 FPS是iOS上的基線幀速率）。

動態更新高度不起做用，咱們有幾個選擇：在iOS上刪除視口單元，匹配iOS 8以前的文檔大小，使用小視圖大小，使用大視圖大小。

根據咱們的數據，使用更大的視圖大小是最好的折衷方案。大多數使用視口單元的網站在大多數時候看起來很棒。
能夠看考Nicolas Hoizey大神對這個問題的研究: https://nicolas-hoizey.com/20...

不打算修復

目前，除了避免在移動設備上使用視口高度以外，沒有更好的解決辦法。移動Chrome彷佛也想要適應這一點，儘管它不肯定它們是否會貫徹執行。（參考連接）