如果你正在構建一個移動端的應用產品，在桌面瀏覽器中一切看起來都很棒，但在手機上，你精心設計的部分卻被尷尬地截斷了。或者滾動起來很奇怪。更糟糕的是，當瀏覽器 UI 隱藏或重新顯示時，它會移動。

你會怎么處理這些問題？我想你肯定是使用了 height: 100vh ，就像每個 CSS 教程都說的那樣。

我遇到過這種情況。我們很多人都遇到過。問題是什么？在移動瀏覽器上，100vh 并不能達到你的預期。

實際情況是這樣的：

在桌面上，100vh 指的是瀏覽器窗口的完整高度，很簡單。

但在移動設備上，瀏覽器的邊（地址欄、工具欄）是動態的。當用戶打開頁面時，工具欄是可見的。當用戶滾動時，瀏覽器會隱藏它們以提供更多的屏幕空間。這會改變可見高度。

但 100vh 并不在乎這些。它只會采用盡可能大的視口高度——通常比當前可見的高度還要高。這就是為什么部分內容會顯得過高，內容會溢出到折疊線以下，感覺一切都不對勁。

這就是為什么人們經常使用像 window.innerHeight 這樣的 JavaScript hack 來手動修復布局，但這很麻煩、容易出錯，而且擴展性也不好。

那有沒有更好的解決方案呢？

CSS 為我們提供了合適的工具：svh、lvh 和 dvh

這些視口單位是 CSS 值和單位模塊 4 級的一部分，它們最終讓我們能夠正確地處理移動設備的高度變化。

讓我們來詳細了解一下它們。

01.svh – 小視口高度

這表示視口可以達到的最小高度，也就是瀏覽器工具欄可見的時候。

當需要確保沒有任何內容被隱藏在移動 UI 后面時，它非常有用——例如，即使在用戶滾動之前，表單或按鈕也需要保持在屏幕上。

height: 100svh;

當內容需要適應初始可見空間時，請使用此選項，無需擔心意外。

02.lvh – 大視口高度

此選項反映了最大視口高度——基本上是在瀏覽器 UI 完全隱藏的情況下。

它適用于在用戶滾動后接管的全屏部分，或者當您想要“真正的”全高體驗時。

height: 100lvh;

想象一下啟動畫面、入門步驟或沉浸式部分。

03.dvh – 動態視口高度

這是三者中最實用的，它會根據瀏覽器的狀態自動在 svh 和 lvh 之間調整。

如果工具欄可見，則更接近 svh。如果工具欄隱藏，則會擴展為 lvh。簡而言之，它反映了屏幕的當前高度——這正是我們大多數人期望 100vh 能做到的，但實際上卻從未做到。

height: 100dvh;

現在，這是我大多數布局的首選。無論瀏覽器界面是打開、關閉還是在兩者之間切換，它都能正常工作。

在移動設備上打開此示例，瀏覽所有高度的頁面，并在導航后上下滾動頁面。

https://v0-create-navigation-app.vercel.app/

真實案例

不久前，我為一位客戶構建了一個產品落地頁。主頁面的背景圖片高度為 100vh。在桌面端，效果完美。但在移動設備上呢？圖片溢出了，很尷尬，CTA 按鈕在 Safari 工具欄下半隱藏，滾動會導致布局偏移。

將高度改為 100dvh 后，所有問題都解決了。無需 JavaScript，也無需任何奇怪的變通方法，只需調整大小即可。

從那時起，我開始將 dvh 作為移動設備上所有全高布局的默認高度。

為什么要切換

這樣就無需與瀏覽器對抗了，這樣可以減少工具欄顯示或隱藏時布局偏移，您無需使用 JavaScript 即可修復 CSS。

您的 UI 在真實設備上的可預測性將更加顯著——這才是最重要的。

最后一點：瀏覽器支持

大多數現代瀏覽器現在都支持這些單位，包括 Chrome、Safari 和 Firefox。如果您支持舊設備或小眾瀏覽器，請訪問 caniuse.com 獲取最新版本。但從 2025 年起，在大多數應用中，我們都可以安全使用它們。

請參閱 MDN 上的此文檔，了解瀏覽器支持情況：https://developer.mozilla.org/en-US/docs/Web/CSS/length

這些 CSS 單位解決了我們多年來一直困擾的問題。如果您注重移動體驗，請停止依賴 100vh。

使用合適的單位：

• 當布局必須始終可見時，請使用 svh。
• 用于沉浸式全屏視圖的 lvh。
• 用于自然流暢、自適應的響應式布局的 dvh。

在您的下一個項目中嘗試一下，您會立即感受到它的不同——您的用戶也會如此。

最后，感謝您的閱讀，祝編程愉快。