2026 年靜態 HTML 主視覺的動態視口單位：dvh、svh、lvh、行動版 Safari 介面，以及雲端 Mac mini 上的 WebKit 驗收

靜態落地頁至今仍常見 min-height:100vh 的全出血主視覺，而行動版 Safari 仍會在網址列收合時「說謊」：你以為的一個視口高度，與使用者當下真正可見的繪製區域並不一致。設計師常看到標題被裁掉 約 40–120 像素、示範影片被 Home 指示條遮住、主要行動呼籲要意外捲動才出現。到了 2026 年，CSS 提供 動態視口單位——dvh、svh、lvh——它們會跟著 目前可見 的瀏覽器介面調整，而不是永遠對齊「最大可用高度」。本指南給需要 多頁應用（MPA）、且要有一條可重現 WebKit 驗收路線的團隊，而不是只靠 Chromium 模擬。請交叉閱讀 固定導覽與錨點捲動的 scroll-padding、模態與巢狀捲動的 overscroll-behavior，以及 響應式圖片與 LCP 的 srcset／picture，讓捲動、版面與媒體策略彼此對齊。

你會帶走一份單位決策表、可漸進部署的 @supports 堆疊，以及設計審查可在 Git 簽核的數值護欄（行銷主視覺預設 100dvh、瀏海機底部安全區常見約 34 px、每語系硬體驗收約 45 分鐘）。若團隊同時維護多語系字串，請把「英文較短所以沒事」的假設丟掉：德文、巴西葡文等語系常把隱藏的斷行假設一次打穿。

為什麼這件事在台灣市場特別痛？許多 B2B 與金融落地頁仍以靜態 HTML 出貨，行銷節奏快、外包切版多，最後一哩常只剩「在主管的 iPhone 上看一下」。這種流程最容易漏掉網址列動畫與底部工具列的交互影響；而 dvh 的價值，正是把「看起來對」的偶然，轉成「規則保證」的可重複流程。

為什麼 100vh 在行動版 Safari 仍會壞

傳統 vh 對齊的是 大型視口（large viewport），也就是瀏覽器介面「盡量隱藏」時可用的高度。行動版 Safari 會在捲動過程中動畫化頂端網址列與底部工具列，導致實際可見的繪製區域比你所依據的單位小很多。桌面版 Chrome 的響應式模式通常無法完整重播同一條介面動畫曲線；只在模擬器驗收的團隊，常在「高階主管的 iPhone」上才第一次看到回歸。

這不是「Safari 錯了」，而是 vh 回答的是 2012 年的版面視口問題，而 2026 年 的產品設計更常問：「請對齊使用者此刻看得到的高度。」動態單位補上這個缺口，而且不需要用 JavaScript 的 resize 監聽去對抗合成器捲動、也不會在行銷長頁上額外耗電。

補充一個實務觀察：許多團隊會用 window.innerHeight 做一次性修正，但這會引入第二套真實來源；只要 CSS 與 JS 各算一次，就可能在工具列過渡期出現「抖一下」的邊界案例。靜態網站的可維護性，往往取決於你能不能把關鍵高度收斂到樣式表裡。

dvh 對上 svh 與 lvh 的決策表

dvh（dynamic viewport height）會跟著工具列出現／消失而變化。svh（small viewport height）鎖在「介面最多、可視高度最小」的配置，適合要保證 CTA 不會被網址列蓋住的場景。lvh（large viewport height）則貼近舊式 vh 的行為。寬度向也有 dvw、svw、lvw，對於在瀏海機上左右出血的橫向輪播特別有用。

單位	最適合	誤用風險
100dvh	全螢幕主視覺、開場全幅區塊	捲動時高度微變，可能讓背景影片視覺上「位移」
100svh	首屏保證、促銷條與法務提示	介面隱藏後可能留下較多空白
100lvh	舊版相容、僅桌面帶狀區塊	在 iOS 上仍可能出現舊 vh 的裁切問題
calc(100dvh - 4rem)	扣除固定導覽列的主視覺	忘記加上 env(safe-area-inset-*) 會在瀏海機露餡

行銷主視覺預設使用 min-height:100dvh，除非美術執著要鎖定「最小可視高度」——例如法務橫幅必須在網址列展開時也完整可見。

決策時也可把「內容是否允許被動態高度帶著走」當成第一個問題：若背景是照片或漸層，動態變化通常可接受；若背景影片的構圖必須穩定，可能要搭配 object-fit:cover 與更保守的安全邊界，或改以 svh 鎖首屏。

靜態 HTML 的主視覺版型

優先使用 min-height 而不是死板的 height，讓翻譯後標題變長時不會裁到降部。置中排版可用 flexbox，但除非已用 overscroll-behavior 測過巢狀捲動，否則不要把捲動鎖在 hero 內部而讓文件本體不捲。背景影片在文字後方時，請用 dvh 決定容器高度，並對媒體元素設定 object-fit:cover，讓 LCP 歸因維持誠實。

左右分欄（文案在左、裝置 mock 在右）時，建議把 mock 的高度上限設為 max-height:70dvh，避免橫向手機把 CTA 推出視窗外。字級可用 clamp()，讓 reflow 留在動態盒子內而無需 JavaScript。

若 hero 內還要放「次要連結列」或「合作夥伴 logo 帶」，請預留可折疊的行為；全視窗高度在小型裝置上非常昂貴，任何額外橫列都會擠壓主要 CTA 的可見性。

安全區與黏性底欄

動態視口單位負責盒子尺寸，但不能取代 env(safe-area-inset-top) 與 env(safe-area-inset-bottom)。固定購買列建議如下：

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

在 iPhone 15 等級硬體上，底部安全區常落在 34 px 附近；只padding 16 px 仍可能切到按鈕。若你刻意要把背景畫到瀏海後方，請在 viewport meta 加上 viewport-fit=cover；否則在某些情況下安全區變數可能讀到 0，但硬體仍有實體指示區需要留白。

另外，請不要把「安全區」誤解成「只要加 padding 就好」：有些互動元件還需要可點擊面積與焦點環的可視性，這些在 VoiceOver 導覽時會被放大檢視。

以 @supports 漸進強化

.hero {
  min-height: 100vh;
}
@supports (height: 100svh) {
  .hero { min-height: 100svh; }
}
@supports (height: 100dvh) {
  .hero { min-height: 100dvh; }
}

請維持這個順序，讓較舊的 WebKit 仍能優雅降級。若你的靜態流程會內嵌關鍵 CSS，請確保整段堆疊能塞進首屏常見的 14 KB gzip 預算內——主視覺天生就在折疊線之上。

若你使用設計權杖（design tokens）產生 CSS，也請把這段堆疊視為「不可被 tree-shaking 掉」的核心，而不是可選的外掛樣式。

2026 年的 WebKit 注意點

macOS Safari 在非全螢幕視窗中，會把動態單位映射到可見內容矩形；與 iOS 相比，分頁列與工具列出現時可能差 8–12 px。請兩個平台都截圖留存。當 100dvh 隨工具列過渡而變化時，建議停用昂貴的 background-attachment:fixed——視差技巧容易觸發主執行緒重繪，在 M 系列基礎晶片高負載時可能掉到 55 fps 以下。

dvh 尺寸盒子內的黏性元素，可能在動態單位變化時看起來「跳一下」。可行的做法是：把黏性導覽放回文件根層級，只讓裝飾性背景用 dvh 承載高度變化。

若你同時使用 100svh 做促銷條、又用 100dvh 做主視覺，請特別檢查兩者在旋轉與分割螢幕（例如 iPad 分割視窗）下的組合；這類組合問題常在「只有手機尺寸設計稿」的流程中被忽略。

實機驗收清單

1. 在網址列展開狀態載入頁面，確認主要 CTA 不需捲動即可看見。
2. 向下捲動約 120 px，確認工具列收合不會把依法必須可見的文字藏起來。
3. 旋轉為橫向，確認使用 svh 的促銷區仍避開 Home 指示條。
4. 開啟 VoiceOver 走訪黏性底欄：底部留白不應把焦點「推」到螢幕外。
5. 在穩定版 Safari 與 STP 之間比對連拍截圖，留意 Apple 釋出視口相關變更時的回歸。
6. 把合併前後的 PNG 附在變更單上，讓設計師能書面簽核。

當字串比英文長 30% 以上時，建議每語系預留約 45 分鐘 的硬體驗收；德文與巴西葡文特別容易暴露「英文剛好塞得下」的版面假設。

常見問題

是否要把所有 vh 都換成 dvh？

不必；中段裝飾帶可保留 vh。優先處理全視窗主視覺、模態底板，以及會與行動介面互動的黏性 CTA。

Lighthouse 會因為 dvh 扣分嗎？

實驗室工具仍可能回報版面位移，若 hero 內圖片缺少尺寸屬性；動態單位不能取代媒體的寬高資訊。

可以把 JavaScript 的 innerHeight 跟 CSS 單位混用嗎？

不建議，因為會形成雙重真實來源；resize 監聽也容易與合成器捲動打架並重新引入卡頓。請優先使用 CSS 動態單位並搭配 @supports 後援。

透過 MacHTML 租用 Apple Silicon Mac mini，你拿到的是利害關係人在現場使用的同一條 WebKit，而不是在 Linux 容器裡「假裝是 Safari」。節點提供 SSH 方便自動化截圖差異管線，也可選 VNC 讓設計師逐幀檢視工具列動畫。待機功耗常落在 6–12 W，把硬體開著做兩週視口稽核，通常仍比在上線窗口期才修 hero 回歸便宜。

公開定價約為 每天 16.9 美元，相較於為了一次活動再買一台桌面主機、活動結束後長期閒置，更可控。驗收結束即可停止實例；你的 dvh 堆疊留在 Git，金屬機器也不會在 36 個月 的採購週期裡默默折舊。