你是否曾被這些問題困擾：

• 移動端頁面滾動時，地址欄收縮導致頁面高度突變，元素錯位？
• 100vh在移動設備上實際高度超出可視區域？
• 全屏彈窗底部總被瀏覽器UI遮擋？

這些痛點背后都是傳統視口單位的局限——無法響應瀏覽器UI的動態變化。

? 傳統單位的局限性

/* 移動設備上實際高度 = 100%可視區域 + 地址欄高度 */
.container {height: 100vh; 
}

當用戶滾動頁面時，瀏覽器地址欄收縮，但100vh不會隨之變化，導致底部內容被裁剪。

---

🚀 新一代視口單位：動態適應UI變化

CSS2022新標準推出三大動態單位：

單位	適用場景	特性說明
svh	瀏覽器UI展開時	最小視口高度（地址欄可見）
lvh	瀏覽器UI收縮時	最大視口高度（地址欄隱藏）
dvh	自動適配動態變化	根據當前UI狀態實時調整

核心解決方案

/* 關鍵代碼示例 */
.modal {height: 100dvh; /* 自動排除瀏覽器UI高度 */
}.header {padding-top: env(safe-area-inset-top); /* 兼容劉海屏 */
}

---

🌟 實戰應用場景

1. 全屏彈窗優化

.modal-overlay {height: 100dvh; /* 始終填滿可視區域 */
}

2. 移動端底部導航欄

.navbar {position: fixed;bottom: 0;height: calc(60px + env(safe-area-inset-bottom));
}

3. 響應式布局容器

.hero-section {min-height: 100dvh;padding: 0 5vw; /* 混合使用動態與靜態單位 */
}

---

?? 兼容性與降級方案

雖然現代瀏覽器（Chrome108+、Safari15.4+）已全面支持，仍需考慮兼容：

.container {height: 100vh; /* 傳統方案備用 */height: 100dvh; /* 優先使用動態單位 */
}@supports not (height: 100dvh) {/* iOS舊版本特殊處理 */@media screen and (max-width: 768px) {.container { height: calc(100vh - 72px); }}
}

---

總結：不同單位的適用場景

單位	推薦使用場景
vh	PC端固定布局
svh	必須保證元素完整可見的靜態頁面
lvh	需要利用最大高度的特殊場景
dvh	95%的移動端動態布局需求

開發建議：
移動端項目直接啟用dvh作為主單位，搭配@supports進行漸進增強，可徹底解決視口高度錯位問題。

掌握動態視口單位，從此告別移動端適配的詭異跳動！立即升級你的CSS武器庫吧～

關鍵詞: CSS動態視口單位 dvh/vh兼容方案 移動端適配解決方案 前端開發實用技巧