新增的 CSS 單元計入包含動態工具列的行動裝置可視區域。
可視區域及其單位
如要將某個項目的大小設為可視區域的高度,您可以使用 vw
和 vh
單位。
vw
= 可視區域大小寬度的 1%。vh
= 可視區域大小高度的 1%。
將元素的寬度設為 100vw
,高度為 100vh
,該元素就會完全涵蓋可視區域。

系統會使用藍色虛線框線表示可視區域本身。
導入這些額外單元在瀏覽器中的 vw
和 vh
單元
vi
= 可視區域內嵌軸大小的 1%。vb
= 可視區域區塊軸大小的 1%。vmin
=vw
或vh
中較小。vmax
=vw
或vh
中較大的值。
這些單元能夠妥善支援瀏覽器。
瀏覽器支援
- 20
- 12
- 19
- 6
採用新的可視區域單元
雖然現有廣告單元在桌機上運作正常,但在行動裝置上卻也是如此。在這些位置,可視區域大小會因動態工具列是否存在而有影響。這些是使用者介面,例如網址列和分頁標籤列。
雖然可視區域大小可能會改變,但 vw
和 vh
大小不會改變。因此,大小為 100vh
的元素會超出可視區域範圍。

捲動到這些動態工具列時,這些動態工具列就會收合。在這種狀態下,大小為 100vh
的元素會覆蓋整個可視區域。

為解決這個問題,CSS Working Group 中指定了可視區域的不同狀態。
- 大型可視區域:假設通用 Analytics (分析) 介面經過動態展開並撤銷後撤銷,即為可視區域大小。
- 小可視區域:假設所有通用 Analytics (分析) 介面會動態展開並撤銷以展開狀態,此為可視區域大小。

新的可視區域也會指派單元:
- 代表大型可視區域的單位會有一個
lv
前置字元。單位為lvw
、lvh
、lvi
、lvb
、lvmin
和lvmax
。 - 代表小型可視區域的單位會有一個
sv
前置字元。單位為svw
、svh
、svi
、svb
、svmin
和svmax
。
除非調整可視區域本身大小,否則這些可視區域百分比單元的大小是固定的 (因此保持穩定)。

一個行動瀏覽器有一個大小為 100svh 和其他 100lvh 的元素。
除了大和小的可視區域外,我們還提供動態可視區域,將通用 Analytics (分析) 使用者介面動態納入考量:
- 動態工具列展開時,動態可視區域的大小就是小型可視區域。
- 動態工具列撤回後,動態可視區域的大小就會與大可視區域的大小相同。
隨附的單元會包含 dv
前置字元:dvw
、dvh
、dvi
、dvb
、dvmin
和 dvmax
。大小限制會在 lv*
和 sv*
之間對應。

這些單元將於 Chrome 108 版推出,並加入已支援的 Safari 和 Firefox。
瀏覽器支援
- 108
- 108
- 101
- 15.4
注意事項
關於可視區域單元,請留意以下幾點:
任何可視區域單元都不會將捲軸大小列入考量。因此,在已啟用傳統捲軸的系統中,大小設為
100vw
的元素寬度會稍微寬一點。這是根據規格提供的資訊。動態可視區域的值不會以 60fps 更新,在所有瀏覽器中,通用 Analytics (分析) 使用者介面展開或撤銷時,更新作業都會受到節流限制。有些瀏覽器甚至會完全根據使用的手勢 (緩慢捲動和滑動等) 完全停用更新。
螢幕小鍵盤 (又稱為虛擬鍵盤) 不屬於通用 Analytics (分析) 使用者介面。因此不會影響可視區域單元的大小。在 Chrome 中,您可以選擇採用虛擬鍵盤會影響可視區域單元的行為。
其他資源
如要進一步瞭解可視區域和這些單位,請觀看這集 HTTP 203 節目。其中,Bramus 會向 Jake 告知各種可視區域,並解釋這些廣告單元大小的決定方式。
其他閱讀教材: