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

Bramus

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

以下為您說明相關異動的背景資訊、Chrome 進行這項異動的原因，以及可採取的行動。

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

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

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

使用 position: fixed 定位元素時，這些項目會顯示在版面配置可視區域上。當您向下捲動頁面時，版面配置可視區域會保持固定，因此使用 position: fixed 的元素會維持原樣。

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

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

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

雙指撥動放大時，系統會縮小視覺化可視區域的大小，並與版面配置可視區域相關。

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

可視區域大小調整行為

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

進行這項操作時，瀏覽器會以下列其中一種方式因應各種檢視點：

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

這三項行為的視覺呈現如下：

並列呈現上述三個行為的視覺化圖表。
上述三個行為的視覺化圖表。畫面顯示 iOS 版 Safari (左圖) 和 Android 版 Chrome (中間和右圖)。

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

對應各種調整大小行為

在 2022 年互通性「可視區域調查」中，針對各個主要瀏覽器和作業系統組合，調查多個與可視區域相關的層面。

測試的其中一個面向是當 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 顯示：

  • 可視區域相關單位縮減的值。
  • 原本會占用整個視覺空間的元素會縮小。
  • 使用 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 版的運送服務也是可視區域中繼標記的擴充功能。

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

interactive-widget 的接受值如下：

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

如要在 Android 版上重新加入「舊版」的 Chrome，請將可視區域中繼標記設為：

<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 回報您的意見。請務必在報表標題中加入「螢幕小鍵盤」。

其他資源