为 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 时的调整大小行为。这导致了以下分类：

第一组

调整视觉视口大小，而不影响布局视口的浏览器。

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

第二组

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

  • Android 上的 Chrome
  • Android 版 Firefox
  • Android 设备上的 Edge
  • Firefox（iOS 版）

第三组

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

  • 默认情况下无 - 在 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 不会影响这些单位。

选择启用其他行为

如果您希望网站使用 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 中所有三个值的直观比较。从左到右：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 上报告反馈。请务必在报告标题中包含“屏幕键盘”。

其他资源