資訊專欄INFORMATION COLUMN
摘要：正文不幸的是這個問題是一直有意存在的這是一個眾所周知的問題至少在中是存在的，這是有意的，因為它可以防止其他問題。參見回復這完全是故意的。常見問題在移動瀏覽器中不是固定的，恒定的創客青年博客基本問題是滾動時可見區域會動態變化。
站長博客：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似乎也想要適應這一點，盡管它不確定它們是否會貫徹執行。（參考鏈接）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117434.html
摘要：不同的前端框架，配合等打包工具，可以更高效的使用這些插件，完成移動端適配的配置工作。 簡介 【目標】：前端開發移動端及H5時候，不需要再關心移動設備的大小，只需要按照固定設計稿的px值布局！【基礎】 dpr（設備像素比）css的像素px不等于設備像素/分辨率/各種值，css的px可以簡單理解為虛擬像素，與設備無關，css的px需要乘dpr計算為設備像素； css3 的 rem，即ro...
閱讀 1058·2021-11-25 09:43
閱讀 1426·2021-11-18 10:02
閱讀 1871·2021-11-02 14:41
閱讀 2384·2019-08-30 15:55
閱讀 1082·2019-08-29 16:18
閱讀 2566·2019-08-29 14:15
閱讀 1401·2019-08-26 18:13
閱讀 748·2019-08-26 10:27
