新增的 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 告知各種可視區域，並解釋這些廣告單元大小的決定方式。
其他閱讀教材：
新可互通系列的一部分