自 11 月推出 Chrome 108 時,Chrome 會調整螢幕小鍵盤 (OSK) 顯示時版面配置可視區域的行為。這項異動生效後,Android 裝置上的 Chrome 將不再調整版面配置可視區域的大小,而是只調整視覺可視區域的大小。因此,Android 版 Chrome 的運作方式會與 iOS 版和 iOS 版 Chrome 的 Chrome 行為保持一致。
以下將概略說明發生情況、Chrome 做出這項變更的原因,以及您可以採取的準備工作。
版面配置可視區域和視覺可視區域
造訪網站時,您無法在網頁載入後看到整個網頁的內容。而是提供可視區域,方便您查看網頁的部分內容。此可視區域又稱為版面配置可視區域。當網頁內容太大時,瀏覽器會提供捲動機制。
使用 position: fixed
定位元素時,這些元素會按照該版面配置可視區域進行配置。當您向下捲動頁面時,版面配置可視區域會保持不變,因此使用 position: fixed
的元素會保持不變。
除了此版面配置可視區域以外,瀏覽器也提供視覺可視區域。這代表其他使用者目前能看到的可視區域部分。縮放等級為 1 時,這個視覺可視區域和版面配置可視區域一樣大。
雙指撥動縮放時,系統會將視覺可視區域的大小縮小 (相對於版面配置可視區域)。
可視區域大小調整行為
當聚焦輸入或其他可編輯區域時,裝置 (通常是觸控螢幕裝置) 可以顯示螢幕小鍵盤。這個鍵盤通常稱為虛擬鍵盤,可讓使用者在可編輯區域中輸入內容。
這麼做時,瀏覽器會根據不同的可視區域,採取下列其中一種回應方式:
- 僅調整視覺可視區域大小,並偏移版面配置可視區域。
- 調整視覺可視區域和版面配置可視區域的大小。
- 不要調整任何版面配置可視區域或視覺可視區域大小,將虛擬鍵盤疊加在兩者上方。
這三種行為會以圖解方式呈現:
視訪客使用的瀏覽器和作業系統組合而定,系統會採用一種行為,而不是您控制的行為。
對應各種調整大小行為
在 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
的元素可能會在版面配置中的其他位置。
除非您是使用 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 和 iOS 上的 Safari 現在的運作方式大致相同,因此不會造成封鎖。因此,在 iOS 裝置上支援 Safari 的網站應該也能在 Android 裝置上的 Chrome 108 中正常運作。
不過,我們仍建議網站作者在 Chrome 108 版中主動測試網站。Chrome 108 已於 2022 年 10 月 27 日推出 Beta 版。請特別留意使用 position: fixed
和/或依賴可視區域相關單位的元素。
如有意見回饋,請前往 crbug.com。請務必在報表標題中加入「螢幕小鍵盤」。