資訊專(zhuān)欄INFORMATION COLUMN
摘要：正文不幸的是這個(gè)問(wèn)題是一直有意存在的這是一個(gè)眾所周知的問(wèn)題至少在中是存在的，這是有意的，因?yàn)樗梢苑乐蛊渌麊?wèn)題。參見(jiàn)回復(fù)這完全是故意的。常見(jiàn)問(wèn)題在移動(dòng)瀏覽器中不是固定的，恒定的創(chuàng)客青年博客基本問(wèn)題是滾動(dòng)時(shí)可見(jiàn)區(qū)域會(huì)動(dòng)態(tài)變化。
站長(zhǎng)博客：https://www.pipipi.net/
前言
加載頁(yè)面時(shí)所有瀏覽器都有一個(gè)頂級(jí)菜單（例如顯示地址欄），當(dāng)您開(kāi)始滾動(dòng)頁(yè)面時(shí)，該菜單會(huì)向上滑動(dòng)。這個(gè)時(shí)候該菜單會(huì)變小，由于100vh僅在視口的可見(jiàn)部分計(jì)算，因此會(huì)導(dǎo)致所有布局都重新繪制并重新調(diào)整，對(duì)用戶(hù)體驗(yàn)的糟糕跳躍效果。
參見(jiàn)圖如下，明顯可見(jiàn)第二個(gè)菜單欄變小了。
正文
不幸的是這個(gè)問(wèn)題是一直有意存在的.....
這是一個(gè)眾所周知的問(wèn)題（至少在safari mobile中是存在的），這是有意的，因?yàn)樗梢苑乐蛊渌麊?wèn)題。 參見(jiàn)Benjamin Poulain回復(fù)webkit bug:
這完全是故意的。我們需要花費(fèi)大量的工作才能達(dá)到這個(gè)效果。 CSS3常見(jiàn)問(wèn)題：100vh在移動(dòng)瀏覽器中不是固定的，恒定的-創(chuàng)客青年博客基本問(wèn)題是：滾動(dòng)時(shí)可見(jiàn)區(qū)域會(huì)動(dòng)態(tài)變化。如果我們相應(yīng)地更新CSS視口高度，我們需要在滾動(dòng)期間更新布局。不僅如此看起來(lái)像狗屎，但在大多數(shù)頁(yè)面中以60
FPS執(zhí)行此操作幾乎是不可能的（60 FPS是iOS上的基線(xiàn)幀速率）。動(dòng)態(tài)更新高度不起作用，我們有幾個(gè)選擇：在iOS上刪除視口單元，匹配iOS 8之前的文檔大小，使用小視圖大小，使用大視圖大小。
根據(jù)我們的數(shù)據(jù)，使用更大的視圖大小是最好的折衷方案。大多數(shù)使用視口單元的網(wǎng)站在大多數(shù)時(shí)候看起來(lái)很棒。
可以看考Nicolas Hoizey大神對(duì)這個(gè)問(wèn)題的研究: https://nicolas-hoizey.com/20...
不打算修復(fù)
目前，除了避免在移動(dòng)設(shè)備上使用視口高度之外，沒(méi)有更好的解決辦法。移動(dòng)Chrome似乎也想要適應(yīng)這一點(diǎn)，盡管它不確定它們是否會(huì)貫徹執(zhí)行。（參考鏈接）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117434.html
摘要：不同的前端框架，配合等打包工具，可以更高效的使用這些插件，完成移動(dòng)端適配的配置工作。 簡(jiǎn)介 【目標(biāo)】：前端開(kāi)發(fā)移動(dòng)端及H5時(shí)候，不需要再關(guān)心移動(dòng)設(shè)備的大小，只需要按照固定設(shè)計(jì)稿的px值布局！【基礎(chǔ)】 dpr（設(shè)備像素比）css的像素px不等于設(shè)備像素/分辨率/各種值，css的px可以簡(jiǎn)單理解為虛擬像素，與設(shè)備無(wú)關(guān)，css的px需要乘dpr計(jì)算為設(shè)備像素； css3 的 rem，即ro...
閱讀 1055·2021-11-25 09:43
閱讀 1425·2021-11-18 10:02
閱讀 1868·2021-11-02 14:41
閱讀 2381·2019-08-30 15:55
閱讀 1080·2019-08-29 16:18
閱讀 2564·2019-08-29 14:15
閱讀 1399·2019-08-26 18:13
閱讀 746·2019-08-26 10:27
