2025年請(qǐng)停止在移動(dòng)設(shè)備上使用 100vh,你應(yīng)該學(xué)會(huì)使用這些新的 CSS 單位
如果你正在構(gòu)建一個(gè)移動(dòng)端的應(yīng)用產(chǎn)品,在桌面瀏覽器中一切看起來(lái)都很棒,但在手機(jī)上,你精心設(shè)計(jì)的部分卻被尷尬地截?cái)嗔?。或者滾動(dòng)起來(lái)很奇怪。更糟糕的是,當(dāng)瀏覽器 UI 隱藏或重新顯示時(shí),它會(huì)移動(dòng)。
你會(huì)怎么處理這些問(wèn)題?我想你肯定是使用了 height: 100vh ,就像每個(gè) CSS 教程都說(shuō)的那樣。
我遇到過(guò)這種情況。我們很多人都遇到過(guò)。問(wèn)題是什么?在移動(dòng)瀏覽器上,100vh 并不能達(dá)到你的預(yù)期。
實(shí)際情況是這樣的:
在桌面上,100vh 指的是瀏覽器窗口的完整高度,很簡(jiǎn)單。
但在移動(dòng)設(shè)備上,瀏覽器的邊(地址欄、工具欄)是動(dòng)態(tài)的。當(dāng)用戶(hù)打開(kāi)頁(yè)面時(shí),工具欄是可見(jiàn)的。當(dāng)用戶(hù)滾動(dòng)時(shí),瀏覽器會(huì)隱藏它們以提供更多的屏幕空間。這會(huì)改變可見(jiàn)高度。
但 100vh 并不在乎這些。它只會(huì)采用盡可能大的視口高度——通常比當(dāng)前可見(jiàn)的高度還要高。這就是為什么部分內(nèi)容會(huì)顯得過(guò)高,內(nèi)容會(huì)溢出到折疊線(xiàn)以下,感覺(jué)一切都不對(duì)勁。
這就是為什么人們經(jīng)常使用像 window.innerHeight 這樣的 JavaScript hack 來(lái)手動(dòng)修復(fù)布局,但這很麻煩、容易出錯(cuò),而且擴(kuò)展性也不好。
那有沒(méi)有更好的解決方案呢?
CSS 為我們提供了合適的工具:svh、lvh 和 dvh
這些視口單位是 CSS 值和單位模塊 4 級(jí)的一部分,它們最終讓我們能夠正確地處理移動(dòng)設(shè)備的高度變化。
讓我們來(lái)詳細(xì)了解一下它們。
01.svh – 小視口高度
這表示視口可以達(dá)到的最小高度,也就是瀏覽器工具欄可見(jiàn)的時(shí)候。
當(dāng)需要確保沒(méi)有任何內(nèi)容被隱藏在移動(dòng) UI 后面時(shí),它非常有用——例如,即使在用戶(hù)滾動(dòng)之前,表單或按鈕也需要保持在屏幕上。
height: 100svh;
當(dāng)內(nèi)容需要適應(yīng)初始可見(jiàn)空間時(shí),請(qǐng)使用此選項(xiàng),無(wú)需擔(dān)心意外。
02.lvh – 大視口高度
此選項(xiàng)反映了最大視口高度——基本上是在瀏覽器 UI 完全隱藏的情況下。
它適用于在用戶(hù)滾動(dòng)后接管的全屏部分,或者當(dāng)您想要“真正的”全高體驗(yàn)時(shí)。
height: 100lvh;
想象一下啟動(dòng)畫(huà)面、入門(mén)步驟或沉浸式部分。
03.dvh – 動(dòng)態(tài)視口高度
這是三者中最實(shí)用的,它會(huì)根據(jù)瀏覽器的狀態(tài)自動(dòng)在 svh 和 lvh 之間調(diào)整。
如果工具欄可見(jiàn),則更接近 svh。如果工具欄隱藏,則會(huì)擴(kuò)展為 lvh。簡(jiǎn)而言之,它反映了屏幕的當(dāng)前高度——這正是我們大多數(shù)人期望 100vh 能做到的,但實(shí)際上卻從未做到。
height: 100dvh;
現(xiàn)在,這是我大多數(shù)布局的首選。無(wú)論瀏覽器界面是打開(kāi)、關(guān)閉還是在兩者之間切換,它都能正常工作。
在移動(dòng)設(shè)備上打開(kāi)此示例,瀏覽所有高度的頁(yè)面,并在導(dǎo)航后上下滾動(dòng)頁(yè)面。
https://v0-create-navigation-app.vercel.app/
真實(shí)案例
不久前,我為一位客戶(hù)構(gòu)建了一個(gè)產(chǎn)品落地頁(yè)。主頁(yè)面的背景圖片高度為 100vh。在桌面端,效果完美。但在移動(dòng)設(shè)備上呢?圖片溢出了,很尷尬,CTA 按鈕在 Safari 工具欄下半隱藏,滾動(dòng)會(huì)導(dǎo)致布局偏移。
將高度改為 100dvh 后,所有問(wèn)題都解決了。無(wú)需 JavaScript,也無(wú)需任何奇怪的變通方法,只需調(diào)整大小即可。
從那時(shí)起,我開(kāi)始將 dvh 作為移動(dòng)設(shè)備上所有全高布局的默認(rèn)高度。
為什么要切換
這樣就無(wú)需與瀏覽器對(duì)抗了,這樣可以減少工具欄顯示或隱藏時(shí)布局偏移,您無(wú)需使用 JavaScript 即可修復(fù) CSS。
您的 UI 在真實(shí)設(shè)備上的可預(yù)測(cè)性將更加顯著——這才是最重要的。
最后一點(diǎn):瀏覽器支持
大多數(shù)現(xiàn)代瀏覽器現(xiàn)在都支持這些單位,包括 Chrome、Safari 和 Firefox。如果您支持舊設(shè)備或小眾瀏覽器,請(qǐng)?jiān)L問(wèn) caniuse.com 獲取最新版本。但從 2025 年起,在大多數(shù)應(yīng)用中,我們都可以安全使用它們。
請(qǐng)參閱 MDN 上的此文檔,了解瀏覽器支持情況:https://developer.mozilla.org/en-US/docs/Web/CSS/length
這些 CSS 單位解決了我們多年來(lái)一直困擾的問(wèn)題。如果您注重移動(dòng)體驗(yàn),請(qǐng)停止依賴(lài) 100vh。
使用合適的單位:
- 當(dāng)布局必須始終可見(jiàn)時(shí),請(qǐng)使用 svh。
- 用于沉浸式全屏視圖的 lvh。
- 用于自然流暢、自適應(yīng)的響應(yīng)式布局的 dvh。
在您的下一個(gè)項(xiàng)目中嘗試一下,您會(huì)立即感受到它的不同——您的用戶(hù)也會(huì)如此。
最后,感謝您的閱讀,祝編程愉快。