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

Bramus

11 月，Chrome 108 版推出後，Chrome 會針對螢幕小鍵盤 (OSK) 顯示時的版面配置檢視區域行為進行一些變更。這項異動後，Android 版 Chrome 就不會再調整版面配置可視區域的大小，只會調整可視區域的大小。這項功能可讓 Android 版 Chrome 的行為與 iOS 版 Chrome 和 iOS 版 Safari 一致。

以下說明相關背景資訊、Chrome 做出這項異動的原因，以及您可以採取的準備措施。

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

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

在瀏覽器中以視覺化方式呈現版面配置可視區域 (藍色邊框)。
在電腦版瀏覽器中，版面配置可視區域的圖示(藍色輪廓)。

使用 position: fixed 定位元素時，這些元素會根據該版面配置可視區域進行排版。當您向下捲動網頁時，版面配置可視區域會維持在原位，使用 position: fixed 的元素也會如此。

行動瀏覽器中的版面配置可視區 (藍色輪廓) 示意圖，每個可視區都有兩個使用 `position: fixed` 排版的元素 (藍色方塊)。
行動瀏覽器中版面配置視區的視覺化效果 (藍色輪廓)，每個視區都有兩個元素，分別使用 position: fixed (藍色方塊) 進行版面配置。從左到右依序為 iPhone 上的 Safari、Android 上的 Chrome 和 Android 上的 Firefox。

除了這個版面配置可視區域之外，瀏覽器也提供視覺可視區域。代表目前可見的檢視區域部分。在縮放等級 1 時，這個可視區域的大小與版面配置可視區域相同。

視覺可視區域的視覺化呈現 (橘色輪廓)。
視覺可視區域的視覺化呈現 (橘色邊框)。

當您撥動手指縮放畫面時，會縮小視覺可視區域的大小，以便與版面配置可視區域相關聯。

在經過捏合縮放的頁面上，以視覺化方式呈現視覺可視區域。請注意，視覺可視區域如何包含在版面配置可視區域中。
在捏合縮放的網頁上，以視覺化方式呈現視覺可視區域 (橘色輪廓)。請注意，視覺可視區域如何包含在版面配置可視區域中。

可視區域大小調整行為

當您將焦點放在輸入欄位或任何其他可編輯區域時，裝置 (大多是觸控螢幕裝置) 可能會顯示螢幕小鍵盤。這個鍵盤通常稱為虛擬鍵盤，可讓使用者在可編輯區域輸入內容。

在這種情況下，瀏覽器會根據各種視區回應下列任一方式：

  • 只調整視覺可視區域大小，並偏移版面配置可視區域。
  • 調整視覺可視區域和版面配置可視區域的大小。
  • 請勿調整版面配置可視區域或視覺可視區域的大小，並在兩者上方重疊虛擬鍵盤。

這三種行為的視覺化效果如下：

並排顯示所有上述行為的視覺化效果。
並排顯示所有上述行為的圖表。畫面顯示 iOS 版 Safari (左圖) 和 Android 版 Chrome (中間和右圖)。

系統會根據訪客使用的瀏覽器和作業系統組合，採用其中一種行為，您無法控制這項行為。

對應各種調整大小行為

在 Interop 2022 的 Viewport 調查工作中，我們針對每個主要瀏覽器和作業系統組合，調查各種與視窗相關的層面。

其中一個測試項目是 OSK 顯示時的調整大小行為。因此，我們將其歸類為以下類別：

第一組

瀏覽器會調整視覺可視區域大小，而版面配置可視區域則保持不變。

  • iOS 版 Safari
  • iPadOS 上的 Safari
  • ChromeOS 上的 Chrome
  • 搭配 Chrome 的 iOS
  • iPadOS 版 Chrome
  • iOS 版 Edge
  • iPadOS 上的 Edge

群組二

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

  • Android 裝置上的 Chrome
  • Android 版 Firefox
  • Android 版 Edge
  • iOS 版 Firefox

第三組

以下瀏覽器不會調整任何可視區域的大小：

  • 預設為「無」：在 Android 版 Chrome 中，您可以透過 VirtualKeyboard API 選擇啟用這項行為

每種行為的副作用

在顯示 OSK 時，不同可視區域的調整大小方式不同，導致網站的版面配置和大小行為無法互通。

在群組 1 的瀏覽器中，顯示 OSK：

  • Viewport 相對單位的計算值保持不變。
  • 設計用來占用整個視覺空間的元素會保留原始大小。
  • 使用 position: fixed 的元素會保留在原位，且可能會遭 OSK 遮蔽。

在群組 2 的瀏覽器中，OSK 顯示如下：

  • Viewport 相對單位的計算值會縮小。
  • 原本會占用整個視覺空間的元素會縮小。
  • 使用 position: fixed 的元素可能會出現在版面配置的其他位置。
兩組的副作用可視化呈現。請注意，使用 position: fixed (藍色方塊) 的元素會顯示在不同的位置。
兩組的副作用視覺化呈現。請注意使用 position: fixed (藍色方塊) 的元素的不同位置。畫面顯示 iOS 版 Safari (左圖) 和 Android 版 Chrome (中間和右圖)。

除非您使用 User-Agent 嗅探或大量使用指令碼，否則無法得知系統採用哪種行為。您也無法變更行為，因為這會根據使用者造訪的瀏覽器和作業系統組合而定。

變更 Chrome 108 中的預設行為

自 Chrome 108 起，Android 版 Chrome 會調整可視區域的調整大小行為，以便在螢幕小鍵盤顯示時不再調整版面配置可視區域的大小。

這麼做可讓 Android 版 Chrome 的行為與 iOS、iPadOS、Windows 和 CrOS 版 Chrome、iOS 和 iPadOS 版 Safari 以及 iOS、iPadOS 和 Windows 版 Edge 的行為一致。

有了這項變更，作者就能瞭解 Chrome 在任何作業系統上執行時會採用哪種行為。此外，這項功能還可讓 viewport 相對單位保持穩定：顯示或隱藏 OSK 不會影響這些單位。

選擇採用其他行為

如果您希望網站使用 108 版前調整大小的行為，請放心。Chrome 108 也提供 viewport 中繼標記的擴充功能。

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

interactive-widget 的接受值如下：

  • resizes-visual：只調整視覺可視區域大小，而非版面配置可視區域。
  • resizes-content：同時調整視覺可視區域和版面配置可視區域的大小。
  • overlays-content：請勿調整任何可視區域的大小。

如要選擇恢復 Android 版 Chrome 的「舊」行為，請將 viewport 的 meta 標記設為以下內容：

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

如果您未在 viewport 中加入 interactive-widget 的 meta 標記，Chrome 會採用預設行為，也就是 resizes-visual。

以視覺化方式呈現，這些設定會對各種檢視區產生以下效果：

在 Android 版 Chrome 108 中，三個值的視覺比較。由左至右：resizes-visual、resizes-content 和 overlays-content。
在 Android 裝置上的 Chrome 108 中，三個值的視覺比較。從左到右依序為 resizes-visual、resizes-content 和 overlays-content。

您可以在這個示範網站中，嘗試在瀏覽器中測試各個值的效果。

測試和意見回饋

我們預期現有網站會出現一些細微差異，但這些差異不會造成阻斷，因為 Android 版 Chrome 108 的運作方式與 iOS 版 Safari 相似。因此，在 iOS 版 Safari 上正常運作的網站，在 Android 版 Chrome 108 上也應該可以正常運作。

不過，我們還是建議網站作者積極在 Chrome 108 中測試網站，該版本將於 2022 年 10 月 27 日進入 Beta 版測試階段。請特別留意使用 position: fixed 和/或依賴可視區域相對單位的元素。

你可以前往 crbug.com 回報意見。請務必在回報標題中加入「螢幕鍵盤」。

其他資源