大型、小型和動態可視區域

新增的 CSS 單元計入包含動態工具列的行動裝置可視區域。

Bramus

可視區域及其單位

如要將某個項目的大小設為可視區域的高度，您可以使用 vw 和 vh 單位。

• vw = 可視區域大小寬度的 1%。
• vh = 可視區域大小高度的 1%。

將元素的寬度設為 100vw，高度為 100vh，該元素就會完全涵蓋可視區域。

導入這些額外單元在瀏覽器中的 vw 和 vh 單元

• vi = 可視區域內嵌軸大小的 1%。
• vb = 可視區域區塊軸大小的 1%。
• vmin = vw 或 vh 中較小。
• vmax = vw 或 vh 中較大的值。

這些單元能夠妥善支援瀏覽器。

採用新的可視區域單元

雖然現有廣告單元在桌機上運作正常，但在行動裝置上卻也是如此。在這些位置，可視區域大小會因動態工具列是否存在而有影響。這些是使用者介面，例如網址列和分頁標籤列。

雖然可視區域大小可能會改變，但 vw 和 vh 大小不會改變。因此，大小為 100vh 的元素會超出可視區域範圍。

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

為解決這個問題，CSS Working Group 中指定了可視區域的不同狀態。

• 大型可視區域：假設通用 Analytics (分析) 介面經過動態展開並撤銷後撤銷，即為可視區域大小。
• 小可視區域：假設所有通用 Analytics (分析) 介面會動態展開並撤銷以展開狀態，此為可視區域大小。

新的可視區域也會指派單元：

• 代表大型可視區域的單位會有一個 lv 前置字元。單位為 lvw、lvh、lvi、lvb、lvmin 和 lvmax。
• 代表小型可視區域的單位會有一個 sv 前置字元。單位為 svw、svh、svi、svb、svmin 和 svmax。

除非調整可視區域本身大小，否則這些可視區域百分比單元的大小是固定的 (因此保持穩定)。

除了大和小的可視區域外，我們還提供動態可視區域，將通用 Analytics (分析) 使用者介面動態納入考量：

• 動態工具列展開時，動態可視區域的大小就是小型可視區域。
• 動態工具列撤回後，動態可視區域的大小就會與大可視區域的大小相同。

隨附的單元會包含 dv 前置字元：dvw、dvh、dvi、dvb、dvmin 和 dvmax。大小限制會在 lv* 和 sv* 之間對應。

這些單元將於 Chrome 108 版推出，並加入已支援的 Safari 和 Firefox。

注意事項

關於可視區域單元，請留意以下幾點：

• 任何可視區域單元都不會將捲軸大小列入考量。因此，在已啟用傳統捲軸的系統中，大小設為 100vw 的元素寬度會稍微寬一點。這是根據規格提供的資訊。

• 動態可視區域的值不會以 60fps 更新，在所有瀏覽器中，通用 Analytics (分析) 使用者介面展開或撤銷時，更新作業都會受到節流限制。有些瀏覽器甚至會完全根據使用的手勢 (緩慢捲動和滑動等) 完全停用更新。

• 螢幕小鍵盤 (又稱為虛擬鍵盤) 不屬於通用 Analytics (分析) 使用者介面。因此不會影響可視區域單元的大小。在 Chrome 中，您可以選擇採用虛擬鍵盤會影響可視區域單元的行為。

其他資源

如要進一步瞭解可視區域和這些單位，請觀看這集 HTTP 203 節目。其中，Bramus 會向 Jake 告知各種可視區域，並解釋這些廣告單元大小的決定方式。

其他閱讀教材：

• CSS 值 4 規格：可視區域相關長度
• ChromeStatus 項目
• 版面配置可視區域說明
• 可視區域單元說明