为 Android 版 Chrome 即将发生的视口大小调整行为变更做好准备

Bramus

随着 Chrome 108 的发布，Chrome 将于 11 月对显示屏幕键盘 (OSK) 时布局视口的行为方式做出一些更改。此次变更生效后，Android 版 Chrome 将不再调整布局视口的大小，而只会调整可视视口的大小。这样一来，Android 版 Chrome 的行为将与 iOS 版 Chrome 和 iOS 版 Safari 的行为不相上下。

下面提供了一些背景信息，介绍了发生的情况、Chrome 为何做出此项变更，以及您可以采取哪些准备工作。

布局视口和视觉视口

访问网站时，您无法在网页加载后看到整个网页的内容。浏览器会为您提供一个视口，您可以通过该视口查看网页的一部分。此视口也称为“布局视口”。当网页内容变得过大时，浏览器会提供一种滚动机制。

浏览器中布局视口（蓝色轮廓）的可视化。
桌面浏览器中的布局视口（蓝色轮廓）可视化图表。

使用 position: fixed 定位元素时，这些元素将根据该布局视口进行布局。当您向下滚动页面时，布局视口仍会保持原位，使用 position: fixed 的元素也会保持原位。

移动浏览器中布局视口（蓝色轮廓）的可视化效果，每个视口都有两个元素，分别使用“position: Fixed”（蓝色方框）布局。
移动设备浏览器中的布局视口（蓝色轮廓）图示，其中每个元素都有两个使用 position: fixed（蓝色方框）布局的元素。所示为（从左到右）iPhone 版 Safari、Android 版 Chrome 以及 Android 版 Firefox。

除了此布局视口之外，浏览器还提供了一个视觉视口。它表示视口当前可见的部分。缩放级别为 1 时，此视觉视口与布局视口一样大。

可视化视口（橙色轮廓）。
直观显示视口（橙色轮廓）。

通过双指张合放大视图时，可缩小视觉视口相对于布局视口的大小。

在双指张合缩放页面上显示的可视视口。请注意视觉视口是如何包含在布局视口内的。
视觉视口（橙色轮廓）在缩放页面上的显示效果。请注意视觉视口是如何包含在布局视口内的。

视口大小调整行为

聚焦某个输入源或任何其他可编辑区域时，设备（大多数是触摸屏设备）可显示屏幕键盘。这种键盘通常称为虚拟键盘，可让用户在编辑区域中输入内容。

执行此操作时，浏览器会针对各种视口按以下方式之一进行响应：

  • 仅调整可视视口的大小并偏移布局视口。
  • 调整可视视口和布局视口的大小。
  • 不要调整任何布局视口或可视视口的大小，在两者之上叠加虚拟键盘。

这三种行为直观显示，如下所示：

并排直观呈现上述三种行为。
并排直观呈现上述三种行为。当前显示的是 iOS 上的 Safari（左侧）和 Android 上的 Chrome（中间和右侧）。

根据访问者使用的浏览器和操作系统组合，系统会采用您无法控制的某一行为。

映射各种调整大小行为

在 2022 年互操作性的视口调查工作部分，我们针对每种主流浏览器和操作系统组合，研究了与视口相关的各个方面。

测试的一个方面是显示 OSK 时的调整大小行为。这导致了以下分类：

群组 1

调整视觉视口大小，让布局视口保持不变的浏览器。

  • iOS 版 Safari
  • iPadOS 上的 Safari
  • ChromeOS 上的 Chrome
  • iOS 设备，Chrome 浏览器
  • iPadOS 上的 Chrome
  • iOS 版 Edge
  • iPadOS 上的 Edge

第二组

可同时调整视觉视口和布局视口大小的浏览器。

  • Android 上的 Chrome
  • Android 上的 Firefox
  • Android 上的 Edge
  • iOS 上的 Firefox

第三组

不调整任何视口大小的浏览器：

  • 默认无 - 在 Android 版 Chrome 中，您可以通过 VirtualKeyboard API 选择启用此行为

每种行为的副作用

显示 OSK 时，不同视口大小调整方式的这种差异会导致网站的布局和大小调整行为不可互操作。

在组 1 中的浏览器中，OSK：

  • 视口相对单元的计算值保持不变。
  • 旨在占据整个视觉空间的元素可保持大小不变。
  • 使用 position: fixed 的元素仍会留在原处，并可能会被 OSK 遮挡。

在组 2 中的浏览器中，OSK：

  • 视口相对单元的计算值会缩小。
  • 旨在占据整个视觉空间的元素会收缩。
  • 使用 position: fixed 的元素最终可能会位于布局的其他位置。
两个组的副作用的可视化。请注意使用位置的元素的不同位置：固定（蓝色框）。
直观呈现两组的副作用。请注意使用 position: fixed（蓝色方框）的元素的不同位置。当前显示的是 iOS 上的 Safari（左侧）和 Android 上的 Chrome（中间和右侧）。

除非您采用用户代理嗅探或依赖大量脚本，否则您无法知道使用了哪些行为。您也无法更改此行为，因为此行为是由用户访问时所用的浏览器和操作系统组合决定的。

在 Chrome 108 中更改默认行为

自 Chrome 108 起，Android 版 Chrome 将调整其视口大小调整行为，这样在屏幕键盘显示时，便不会再调整布局视口的大小。

这会使 Android 版 Chrome 的行为与 iOS、iPadOS、Windows 和 CrOS 版 Chrome、iOS 和 iPadOS 版 Safari 以及 iOS、iPadOS 和 Windows 版 Edge 的行为保持一致。

得益于这项变更，无论在哪个操作系统的 Chrome 上运行，作者都可以了解将采用哪种行为。此外，它还支持稳定的相对视口单位：显示或隐藏 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">

如果您未在视口元标记中添加 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（自 2022 年 10 月 27 日起的 Beta 版）中积极测试他们的网站。特别要留意使用 position: fixed 和/或依赖于相对视口单元的元素。

您可以通过 crbug.com 报告反馈。请务必在报告的标题中包含“屏幕键盘”。

其他资源