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

Bramus

11 月，随着 Chrome 108 的发布，Chrome 将对布局视口在显示屏幕键盘 (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（中间和右）。

系统会根据访问者使用的浏览器和操作系统组合，使用其中一种行为，这超出了您的控制范围。

映射各种大小调整行为

在 Interop 2022 的视口调查工作中，我们针对每种主要浏览器和操作系统组合，调查了与视口相关的各种方面。

测试的方面之一是显示 OSK 时的调整大小行为。这就产生了以下分类：

第 1 组

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

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

第 2 组

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

  • 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（中间和右）。

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

在 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 标记设置为以下内容：

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

如果您未在视口宽度元标记中添加 interactive-widget，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 中积极测试其网站。Chrome 108 自 2022 年 10 月 27 日起处于 Beta 版测试阶段。具体而言，请留意使用 position: fixed 和/或依赖于与视口相关的单位的元素。

您可以前往 crbug.com 报告反馈。请务必在报告标题中添加“屏幕键盘”。

其他资源