为 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 的元素（蓝色框）的不同位置。
可视化呈现这两个组中的副作用。请注意使用 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 不会影响这些单位。

选择启用其他行为

如果您希望自己的网站使用 Android 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 报告反馈。请务必在报告标题中添加“屏幕键盘”。

其他资源