Viewport Units：Small, Large, and Dynamic

導言 - Lead paragraph

此內容為 CSS Values and Units Module Level 4，截至今日 2023/8 已出到 CSS Values and Units Module Level 5

⚠️ 請注意：
所有 viewport units 都「不考慮」 scrollbar 的大小。若為傳統 scrollbar 的系統，width: 100vw 可能會超出可視範圍。
手機彈出的虛擬鍵盤「不被視為」使用者介面，因此不影響 viewport units 的值。

儘管 CSS viewport-relative units 已經存在一段時間，但由於其複雜性以及可能在不支援的瀏覽器上導致設計不一致，它們並不像其他 CSS units 那樣被廣泛使用。

在移動設備（IOS / Android) 上，CSS viewport units 初始設定的問題更加明顯。當瀏覽器的工具欄（例如地址欄、標籤導航等）展開或收縮以及虛擬鍵盤時，像是 100 vh 的單位就會因此變得過長，進而出現 scrollbar。

而為了解決這些問題 (不包括虛擬鍵盤)，CSS Working Group 引入了對 Small, Large, and Dynamic viewport units 的全局瀏覽器支持。

前提 - Premise

以下為 CSS values and units - Learn web development | MDN 的繁體中文翻譯整理

CSS Values and units 中數值內的 <dimension> 是一個 <number>，它有一個附加單位，例如 45deg、5s 或 10px。同時也是一個傘形類別，包括 <length>、<angle>、<time> 和 resolution 類型。

而其中最常見的 <number> 類型是 <length>，例如 10px 或 30em。而又有兩種類型的 <length>，叫做 Absolute length units 和 Relative length units。

Absolute length units

Absolute length units（絕對長度單位），與其他任何事物都沒有關係，通常被認為總是相同的大小。

單位	名稱	等價換算
`cm`	公分	1cm = 37.8px = 25.2/64in
`mm`	毫米	1mm = 1/10cm
`Q`	四分之一毫米	1Q = 1/40cm
`in`	英吋	1in = 2.54cm = 96px
`pc`	派卡	1pc = 1/6in
`pt`	點	1pt = 1/72in
`px`	像素	1px = 1/96in

這些值中的大多數在用於 console.log 時比用於螢幕輸出時更有用。

例如：我們通常不會在螢幕上使用 cm（公分）。

唯一一個經常使用的值，估計就是 px（像素）。

Relative length units

Relative length units（相對長度單位）是相對於其他事物的，可能是父元素文字的大小，或是視窗的大小。

好處：透過一些仔細的規劃，可使文字或其他元素的大小相對於頁面上的其他所有元素進行縮放。

以下是網頁開發中最有用的一些單位。

單位	說明
`em`	在字型大小中使用是相對於父元素的文字大小，在其他屬性中使用是相對於自身的文字大小，例如：寬度 (width)。
`ex`	字元「x」的高度。
`ch`	數字「0」的寬度。
`rem`	根元素的文字大小。
`lh`	元素的行高。
`rlh`	根元素的行高。當用於根元素的字型大小或行高屬性時，指的是這些屬性的初始值。
`vw`	視窗寬度的 1%。
`vh`	視窗高度的 1%。
`vmin`	視窗較小尺寸的 1%。
`vmax`	視窗大尺寸的 1%。
`vb`	在 root 元素的區塊向上，初始包含區塊的尺寸的 1%。
`vi`	在 root 元素的行向上，初始包含區塊的尺寸的 1%。
`svw`	視窗較小尺寸寬度的 1%。
`svh`	視窗較小尺寸高度的 1%。
`lvw`	視窗大尺寸寬度的 1%。
`lvh`	視窗大尺寸高度的 1%。
`dvw`	動態視窗寬度的 1%。
`dvh`	動態視窗高度的 1%。

使用 vmin 和 vmax units 的其中一種最有效方法是 create responsive typography 去自適應不同的螢幕尺寸，無需使用多個 media query breakpoints。

而接下來要介紹的就是 Interop 2022 所推出的新 Viewport Units 一一一 svw, svh, lvw, lvh, dvw, dvh。

並且最重要的是：

市面上主流的瀏覽器（Chrome 108，Edge 108，Safari 15.4，Firefox 101, Opera 94）都支援新的 Viewport Units。

The Large, Small, and Dynamic Viewport

So, returning to my point, 為了解決 100vh 從視窗中溢出的問題，有了下列單位：

The “Small Viewport” units: svh / svw / svmin / svmax / svi / svb
The “Large Viewport” units: lvh / lvw / lvmin / lvmax / lvi / lvb
The “Dynamic Viewport” units: dvh / dvw / dvmin / dvmax / dvi / dvb

假設任何動態展開和縮回的 UA interfaces 皆...

Small Viewport：被展開時，所認定的視窗大小。 Large viewport：被縮回時，所認定的視窗大小。

"UA interfaces" 指的是「使用者介面」，其中的 "UA" 是 "User Agent"（使用者代理程式）的縮寫。
在網頁和軟體開發的上下文中，使用者代理程式是指執行在使用者端的軟體應用，例如瀏覽器、行動裝置的應用程式等，用來與網站或應用的伺服器進行溝通和呈現內容。

除了 Small Viewport 和 Large viewport 之外，還有一個 Dynamic viewport，該視窗會根據 UA UI 的動態情況進行調整：

當動態工具列...

被展開時，Dynamic viewport 的大小等於 Small Viewport 的大小。
被收起時，Dynamic viewport 的大小等於 Large viewport 的大小。

vi & vb

除了上述的四個單位外，新的規範實際上之前還定義了另外兩個單位：vi 和 vb。

它們在 Level 4 中已經存在一段時間，但目前僅受到極少數主流瀏覽器的支援。

vi：代表「視窗內聯（Viewport Inline）」，指的是文件的內聯方向。

在水平書寫方向上，對應於視窗的寬度；而在垂直書寫方向上，則表示視窗的高度。

記住內聯方向的簡單方法是將其與文字的方向相同進行聯想。

vb：代表「視窗區塊（Viewport block）」，指的是文件的區塊方向。

與 vi 的水平書寫方向相反，對應於視窗的高度；而在垂直文件中，則表示視窗的寬度。

New Viewport Units

新 Viewport Units 完整清單：

 /* 高度視窗單位 */ 
.height-viewport-units {
  height: 100vh;
  height: 100svh;
  height: 100lvh;
  height: 100dvh;
  block-size: 100vb;
  block-size: 100svb;
  block-size: 100lvb;
  block-size: 100dvb;
}

 /* 寬度視窗單位 */ 
.width-viewport-units {
  width: 100vw;
  width: 100svw;
  width: 100lvw;
  width: 100dvw;
  inline-size: 100vi;
  inline-size: 100svi;
  inline-size: 100lvi;
  inline-size: 100dvi;
}

 /* 最小視窗單位 */ 
.min-viewport-units {
  --size: 100vmin;
  --size: 100svmin;
  --size: 100lvmin;
  --size: 100dvmin;
}

 /* 最大視窗單位 */ 
.max-viewport-units {
  --size: 100vmax;
  --size: 100svmax;
  --size: 100lvmax;
  --size: 100dvmax;
}

Can I use

目前 Small, Large, and Dynamic viewport units 對所有瀏覽器的支援度截至今日 2023/8 已達 88.5%

市面上主流的瀏覽器（Chrome 108，Edge 108，Safari 15.4，Firefox 101, Opera 94）已全支援。

Photo by Kama on Can I use

"Small, Large, and Dynamic viewport units" | Can I use... Support tables for HTML5, CSS3, etc

注意事項 - Caveats

所有的 viewport units 都不考慮 scrollbar 的大小。若為傳統 scrollbar 的系統中，width: 100vw 可能會超出可視範圍。
動態視窗的值不會以每秒60幀的速度更新。在所有瀏覽器中，更新速率會受到使用者介面的展開或縮回而進行限制。某些瀏覽器甚至會根據手勢（例如慢速捲動與快速滑動）來進行更新節流。
手機彈出的虛擬鍵盤並不被視為使用者介面的一部分，因此不影響 viewport units 的大小。

在 Chrome 中可選擇啟用一種行為，使虛擬鍵盤的存在會影響 viewport units 的大小。

結論 - Concluding

從上面總結而言，感覺 Dynamic viewport units 是最好用的，因為「直觀」的表示了當前可用空間的單位。

以後開發不管有沒有 RWD 的考量，感覺都可以直接打上 height: 100vh; height:100dvh 取代原先的 vh-100 了。

讚嘆主流瀏覽器們共同合作了解開發人員的痛點後，一起解決了瀏覽器相容性的問題。

The Dynamic Viewport is the viewport sized with dynamic consideration of any UA interfaces. It will automatically adjust itself in response to UA interface elements being shown or not: the value will be anything within the limits of 100vh (maximum) and 100svh (minimum).

一一 BRAMUS VAN DAMME, “The Large, Small, and Dynamic Viewports”

[1] web-platform-tests/interop-2022-viewport: Viewport investigation project, part of Interop 2022

https://github.com/web-platform-tests/interop-2022-viewport

[2] CSS Values and Units Module Level 4

https://drafts.csswg.org/css-values-4/#viewport-relative-lengths

[3] Interop 2022: browsers working together to improve the web for developers

https://web.dev/interop-2022/

[4] web-platform-tests dashboard

https://wpt.fyi/interop-2022

[5] New Viewport Units

https://ishadeed.com/article/new-viewport-units/