新的 CSS Viewport Units (large/small/dynamic)，目前四大瀏覽器已全部支援！

商業，創業，業務開發，自媒體經營，生活美食，時事分析。

這是我的 FB粉專以及 IG，我也滿常使用 Threads，歡迎大家追蹤互動~

在創業、職涯、人生的路上，希望大家一起陪伴與成長。

larry 之前有一篇關於 Interop 2022 的文章
從 Compat 2021 到 Interop 2022，史上第一次所有的主流瀏覽器，合作解決相容性的問題

https://web.dev/viewport-units/
幾天前 web dev 有一篇文章，提到了 Interop 2022 的第 9 個工作項目：新的 Viewport Units，lvh, svh, dvh。也很高興宣布四大瀏覽器都支援新的 Viewport 單位。

Viewport 長度單位的官方文件在這裡
https://drafts.csswg.org/css-values-4/#viewport-relative-lengths

這份文件是 CSS Values and Units Module Level 4，這份文件從 Level 3 到撰文的此時 (2022年12月) 已經出到 Level 5。

除了我們熟知的 vw, vh，還有 vmin, vmax。vmin 代表 vw / vh 兩者中比較小的，也就是當 viewport 是寬的 (vw > vh)，vmin 代表 vh。當 viewport 是高的，vmin 代表 vw。vmax 也是一樣邏輯，取 vw / vh 兩者中比較大的。

以上這部分是四大瀏覽器早就支援的。

新的 Viewport 單位主要為了解決一般手機瀏覽器，使用者在捲動網頁時，網址列/工具列會自動縮放的問題。

例如 height: 100vh 的區塊，如果手機瀏覽器網址列/工具列都顯示出來，height: 100vh 的區塊其實是比可視面積高的。

上面 Level 4 文件新定義了 3 個新單位：

lv*：large viewport size，所有瀏覽器 UI 縮起來時，最大的網頁可視面積。當設定 height: 100lvh，且瀏覽器 UI 展開時，有可能會遮住網頁。
sv*：small viewport size，所有瀏覽器 UI 展開時，最小的網頁可視面積。當設定 height: 100svh，且瀏覽器 UI 縮起來時，有可能會出現空白面積。
dv*：dynamic viewport size，除了瀏覽器 UI 之外，網頁的可視面積。隨使用者操作，dv* 會動態更新成 lv* 或 sv*。也因為 dv* 會動態更新，使用者操作時可能網頁內容會有奇怪縮放 (如果某一區塊是用 dvh 當單位)。

原本的 vw, vh 指的是 “UA (User Agent) default viewport size”。上面 Level 4 文件指出 default viewport size 可以是 large viewport size 或 small viewport size，或 large / small 之間的值。也就是依照不同手機瀏覽器不一定。

當然，如果不影響你的頁面，不用煩惱。但如果你有手機應用，又正好有 height: 100vh 之類，就要測試一下 large / small / dynamic viewport 單位。

large / small / dynamic viewport 單位，四大瀏覽器 Chrome 108，Firefox 101，Edge 108，Safari 15.4 都已經支援 (以目前2022年12月來講，都算新版瀏覽器)。

上面 web dev 文章有提到 3 點要特別注意：

所有 viewport 單位都「沒有」考慮 scrollbar 的寬度。如果是傳統 scrollbar 的系統，width: 100vw 有可能會超出可視面積。
dynamic viewport 單位值的更新問題。尤其當網頁的更新速度 (frame rate) 小於瀏覽器 UI 縮放的更新速度，dv* 的區塊可能會有奇怪縮放 (本文上方有提到)。
手機彈出的虛擬鍵盤「不算」瀏覽器 UI，因此不影響 viewport 單位的值。