開發(fā)者在設(shè)計(jì)移動(dòng)端布局時(shí)，經(jīng)常遇到這樣的問題：

在桌面瀏覽器上一切正常，但當(dāng)頁(yè)面打開到手機(jī)上時(shí)，精心設(shè)計(jì)的頁(yè)面卻總會(huì)出現(xiàn)奇怪的截?cái)?、異常滾動(dòng)，甚至布局在瀏覽器工具欄隱藏或出現(xiàn)時(shí)發(fā)生位移。

這類問題的元兇通常都是 CSS 中的 height: 100vh。

雖然大多數(shù) CSS 教程都會(huì)推薦使用這個(gè)單位，但實(shí)際上，在移動(dòng)設(shè)備上，100vh 并不能提供理想的用戶體驗(yàn)。

問題到底出在哪？

在桌面環(huán)境下，100vh 很簡(jiǎn)單，代表瀏覽器視窗的全部高度。

但移動(dòng)端瀏覽器則不同，其頂部的地址欄和底部工具欄（瀏覽器 UI）是動(dòng)態(tài)變化的。當(dāng)用戶首次打開頁(yè)面時(shí)，工具欄顯示；當(dāng)用戶開始滾動(dòng)時(shí)，工具欄可能隱藏，視窗高度隨之變化。

然而，100vh 并不考慮這個(gè)動(dòng)態(tài)變化，它總是以瀏覽器最大可能的高度為基準(zhǔn)，導(dǎo)致頁(yè)面實(shí)際顯示內(nèi)容可能被截?cái)?、溢出，用戶體驗(yàn)因此嚴(yán)重受損。

很多開發(fā)者不得不采用 JavaScript 的方式，如使用 window.innerHeight 來動(dòng)態(tài)修正布局，這種做法不僅繁瑣，還容易出錯(cuò)，難以維護(hù)。

幸運(yùn)的是，CSS 現(xiàn)在提供了更合適的解決方案。

CSS 提供的新單位：svh、lvh 和 dvh

CSS 的 Values and Units Module Level 4 引入了專門應(yīng)對(duì)移動(dòng)端布局問題的新單位，分別為：

svh（Small Viewport Height，小視窗高度）

svh 代表視窗的最小高度，即瀏覽器工具欄完全展開并顯示時(shí)的高度。

適用于：

• 必須確保始終在視窗內(nèi)的內(nèi)容，比如固定在頁(yè)面內(nèi)的按鈕、表單或底部導(dǎo)航。

使用示例：

height: 100svh;

lvh（Large Viewport Height，大視窗高度）

lvh 則表示視窗的最大高度，也就是瀏覽器工具欄完全隱藏時(shí)的高度。

適用于：

• 希望用戶獲得完全沉浸式體驗(yàn)的頁(yè)面或交互設(shè)計(jì)，比如全屏啟動(dòng)頁(yè)、歡迎界面等。

使用示例：

height: 100lvh;

dvh（Dynamic Viewport Height，動(dòng)態(tài)視窗高度）

dvh 是三者中最靈活實(shí)用的單位，會(huì)隨著瀏覽器工具欄的隱藏與出現(xiàn)自動(dòng)調(diào)整：

• 工具欄顯示時(shí)，接近 svh；
• 工具欄隱藏時(shí)，則接近 lvh。

換句話說，dvh 才是真正意義上在移動(dòng)端實(shí)現(xiàn)了開發(fā)者期待的動(dòng)態(tài)“100vh”功能。

使用示例：

height: 100dvh;

實(shí)際效果示例：可在移動(dòng)設(shè)備上打開以下示例鏈接，嘗試不同頁(yè)面間的滾動(dòng)交互：

?? 移動(dòng)端高度單位示例 https://v0-create-navigation-app.vercel.app/

實(shí)際項(xiàng)目案例

在一個(gè)實(shí)際的產(chǎn)品登陸頁(yè)項(xiàng)目中，開發(fā)者原本將 hero 部分設(shè)置為 height: 100vh。桌面效果完美，但在移動(dòng)端卻遇到了明顯問題：

• 背景圖片溢出；
• 關(guān)鍵的按鈕被 Safari 工具欄遮擋；
• 滾動(dòng)過程中布局發(fā)生明顯位移。

當(dāng)開發(fā)者將 CSS 改為：

height: 100dvh;

上述問題即刻消失，無需任何 JavaScript 輔助或復(fù)雜的布局調(diào)整。這種方式已經(jīng)逐漸成為移動(dòng)端全屏布局的主流選擇。

為什么應(yīng)該盡快采用新單位？

• 避免與瀏覽器 UI 反復(fù)博弈；
• 減少工具欄顯示或隱藏時(shí)布局的抖動(dòng)與位移；
• 無需再使用 JavaScript 輔助修復(fù)布局；
• 提供更穩(wěn)定、可預(yù)測(cè)的用戶體驗(yàn)，尤其在真實(shí)設(shè)備上尤為明顯。

瀏覽器兼容性情況

截至 2025 年，大部分主流瀏覽器（Chrome、Safari、Firefox 等）都已支持上述單位。

圖片

什么時(shí)候用哪個(gè)單位？

• 如果頁(yè)面內(nèi)容必須始終可見，確保布局永遠(yuǎn)不會(huì)被工具欄遮擋，使用：

height: 100svh;

• 如果追求完全沉浸式全屏體驗(yàn)（如歡迎頁(yè)、啟動(dòng)屏），使用：

height: 100lvh;

• 如果需要布局能在工具欄隱藏或顯示時(shí)動(dòng)態(tài)適應(yīng)，自動(dòng)調(diào)整高度，最推薦使用：

height: 100dvh;

?? 立即實(shí)踐這些新單位吧！

移動(dòng)端布局再也無需忍受 100vh 帶來的種種問題。

開發(fā)者在新項(xiàng)目中立即采用上述單位，便能感受到立竿見影的體驗(yàn)提升——用戶也將明顯感受到差異。