為 Android 版 Chrome 即將推出的可視區域大小調整行為異動做好準備

Bramus

自 11 月推出 Chrome 108 時，Chrome 會調整螢幕小鍵盤 (OSK) 顯示時版面配置可視區域的行為。這項異動生效後，Android 裝置上的 Chrome 將不再調整版面配置可視區域的大小，而是只調整視覺可視區域的大小。因此，Android 版 Chrome 的運作方式會與 iOS 版和 iOS 版 Chrome 的 Chrome 行為保持一致。

以下將概略說明發生情況、Chrome 做出這項變更的原因，以及您可以採取的準備工作。

版面配置可視區域和視覺可視區域

造訪網站時，您無法在網頁載入後看到整個網頁的內容。而是提供可視區域，方便您查看網頁的部分內容。此可視區域又稱為版面配置可視區域。當網頁內容太大時，瀏覽器會提供捲動機制。

瀏覽器中的版面配置可視區域 (藍色外框)。
以視覺化方式呈現電腦瀏覽器中的版面配置可視區域 (藍色外框)。

使用 position: fixed 定位元素時，這些元素會按照該版面配置可視區域進行配置。當您向下捲動頁面時，版面配置可視區域會保持不變，因此使用 position: fixed 的元素會保持不變。

以視覺化方式呈現行動瀏覽器中的版面配置可視區域 (藍色外框)，每個元素包含兩個以 `position: 固定` (藍色方塊) 顯示的元素。
以視覺化方式呈現行動瀏覽器中的版面配置可視區域 (藍色外框)，兩個元素都是使用 position: fixed (藍色方塊) 配置的元素。顯示的類型包括 iPhone 上的 Safari (從左到右)，Android 版 Chrome 和 Android 版 Firefox。

除了此版面配置可視區域以外，瀏覽器也提供視覺可視區域。這代表其他使用者目前能看到的可視區域部分。縮放等級為 1 時，這個視覺可視區域和版面配置可視區域一樣大。

視覺化檢視點的視覺化 (橘色外框)。
視覺化可視區域的視覺化方式 (橘色外框)。

雙指撥動縮放時，系統會將視覺可視區域的大小縮小 (相對於版面配置可視區域)。

雙指撥動縮放頁面的視覺可視區域視覺化。請注意，視覺可視區域納入版面配置可視區域中。
在雙指撥動縮放的頁面中以視覺化方式呈現可視區域 (橘色外框)。請注意，視覺可視區域已納入版面配置可視區域中。

可視區域大小調整行為

當聚焦輸入或其他可編輯區域時，裝置 (通常是觸控螢幕裝置) 可以顯示螢幕小鍵盤。這個鍵盤通常稱為虛擬鍵盤，可讓使用者在可編輯區域中輸入內容。

這麼做時，瀏覽器會根據不同的可視區域，採取下列其中一種回應方式：

  • 僅調整視覺可視區域大小，並偏移版面配置可視區域。
  • 調整視覺可視區域和版面配置可視區域的大小。
  • 不要調整任何版面配置可視區域或視覺可視區域大小，將虛擬鍵盤疊加在兩者上方。

這三種行為會以圖解方式呈現：

以圖表呈現上述三種行為。
以視覺化方式呈現上述三種行為。顯示的會是 iOS 版 Safari (左側) 和 Android 版 Chrome (中間和右側)。

視訪客使用的瀏覽器和作業系統組合而定，系統會採用一種行為，而不是您控制的行為。

對應各種調整大小行為

在 Interop 2022 與可視區域相關層面的 Viewport Investigation Effort 中，針對每個主要瀏覽器和作業系統組合，進一步調查各個可視區域的相關面向。

其中一個測試層面是 OSK 顯示時的調整大小行為。因而導致以下分類：

群組一

瀏覽器可以調整視覺可視區域的大小，讓版面配置可視區域保持不變。

  • Safari (iOS)
  • iPadOS 上的 Safari
  • ChromeOS 上的 Chrome
  • 搭配 Chrome 的 iOS
  • iPadOS 上的 Chrome
  • iOS 裝置邊緣
  • iPadOS 邊緣

第二組

可以同時調整視覺可視區域和版面配置可視區域大小的瀏覽器。

  • Android 裝置上的 Chrome
  • Android 版 Firefox
  • Android 邊緣
  • iOS 版 Firefox

第三組

未調整任何可視區域大小的瀏覽器：

  • 預設不設定 - 使用 Android 版 Chrome 時，您可以藉由 VirtualKeyboard API 選擇啟用這項行為。

每項行為的副作用

這樣當 OSK 顯示時，不同可視區域的大小會隨之調整，造成網站無法互通的版面配置和大小行為。

在群組 1 的瀏覽器中，OSK 處於顯示狀態：

  • 可視區域相關單元計算出的值維持不變。
  • 如果元素是專為全螢幕設計，就能維持其大小。
  • 使用 position: fixed 的元素會保持原樣，且可由 OSK 遮蓋。

在群組 2 的瀏覽器中，OSK 處於顯示狀態：

  • 可視區域相關單位縮小計算的值。
  • 專為填滿整個視覺空間而設計的元素。
  • 使用 position: fixed 的元素可能會在版面配置中的其他位置。
以視覺化方式呈現兩組中的副作用。請注意使用位置的元素有不同位置：固定 (藍色方塊)。
以視覺化方式呈現這兩個群組中的副作用。請注意使用 position: fixed 的元素(藍色方塊) 的不同位置。顯示的會是 iOS 版 Safari (左側) 和 Android 版 Chrome (中間和右側)。

除非您是使用 User-Agent 挖掘功能或依賴大量指令碼，否則您不知道使用的行為為何。此外，也無法變更行為，因為行為取決於使用者造訪時所用的瀏覽器和作業系統組合。

在 Chrome 108 版中變更預設行為

在 Chrome 108 版中，Android 版 Chrome 會調整可視區域的調整大小行為，不再調整螢幕小鍵盤顯示區域時的大小。

如此一來，Android 版 Chrome 的行為就是與 iOS、iPadOS、Windows 和 CrOS、iOS 和 iPadOS 的 Safari，以及 iOS、iPadOS 和 Windows 上的 Edge。

本次異動生效後，無論執行何種 OS 的作業系統，作者都能知道要使用哪種行為。此外，這也可讓您建立穩定的可視區域相關單元：顯示或隱藏 OSK 不會影響這些單位。

選擇採用其他行為

如果您想讓網站使用 108 之前的調整大小行為，請不必擔心。此外，Chrome 108 版本也成為可視區域中繼標記的擴充功能。

您可以透過 interactive-widget 鍵，向 Chrome 指定您想要的調整大小行為。

接受的 interactive-widget 值如下：

  • resizes-visual：僅調整視覺可視區域大小，而非版面配置可視區域大小。
  • resizes-content：調整視覺可視區域和版面配置可視區域的大小。
  • overlays-content：不要調整任何可視區域大小。

如要改回採用「舊版」Chrome (Android) 行為，請將可視區域中繼標記設為：

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

如果您未在可視區域中繼標記中加入 interactive-widget，Chrome 會使用預設行為 (resizes-visual)。

視覺化後，設定會在各種可視區域中產生影響：

在 Android 裝置上，以視覺化方式比較 Chrome 108 中所有三個值。從左到右：調整視覺大小、調整內容大小，以及重疊內容。
在 Android 裝置上，Chrome 108 的這三個值在視覺上比較。從左到右：resizes-visual、resizes-content和overlays-content。

你可以造訪這個示範網站，嘗試在瀏覽器中瞭解各種值的效果。

測試與意見回饋

我們認為現有網站與現有網站稍有不同，但由於 Android 版 Chrome 108 和 iOS 上的 Safari 現在的運作方式大致相同，因此不會造成封鎖。因此，在 iOS 裝置上支援 Safari 的網站應該也能在 Android 裝置上的 Chrome 108 中正常運作。

不過，我們仍建議網站作者在 Chrome 108 版中主動測試網站。Chrome 108 已於 2022 年 10 月 27 日推出 Beta 版。請特別留意使用 position: fixed 和/或依賴可視區域相關單位的元素。

如有意見回饋，請前往 crbug.com。請務必在報表標題中加入「螢幕小鍵盤」。

其他資源