Android 版 Chrome 边到边迁移指南

Bramus

发布时间：2025 年 2 月 28 日

无边框显示是一项 Android 功能，可让应用在 Android 系统栏后方绘制，从而占据整个屏幕的宽度和高度。

在 Chrome 135 之前，Android 版 Chrome 不会采用边到边绘制。本指南介绍了此项变更对网站的影响，以及作为开发者，您可以采取哪些措施来应对此项变更。

注意：Chrome 135 中的变更针对的是小屏设备。目前，在大屏设备上运行的 Android 版 Chrome 不在支持范围内，我们将在未来的 Chrome 版本中解决此问题。

注意：此功能将通过 Chrome 变体推出。因此，您可能会在较低版本的 Chrome 中看到此功能。

各处的酒吧

Android 附带由操作系统本身提供的系统栏。

状态栏、标题栏和导航栏统称为系统栏。这些系统栏用于显示电池电量、时间和通知提醒等重要信息，并支持随时随地直接与设备互动。

在屏幕顶部，您可以找到状态栏，其中包含通知图标和系统图标。

Android 上的状态栏突出显示（来源）。

在屏幕底部，您可以看到导航栏，您可以使用返回、主屏幕和概览控件来控制导航。这可以是经典的三按钮导航栏，也可以是现代的手势导航栏。

手势导航栏（来源）。

除了 Android 系统栏之外，Chrome 本身也自带地址栏，该地址栏会随着您的滚动而动态展开和收起。

Chrome 采用无边框设计

当您访问某个网站时，该网站会显示在一个称为（布局）视口的矩形区域中。

在 Android 版 Chrome 中，Chrome 135 之前，该布局视口会在顶部状态栏和底部手势导航栏之间绘制。Chrome 地址栏的存在（或不存在）可能会影响视口的大小，但视口绝不会扩展到顶部系统栏或底部手势导航栏。

Chrome 135 之前，Android 版 Chrome 中视口的大小下限和上限。这些尺寸称为小型视口和大型视口。视口本身具有蓝色虚线轮廓。

从 Chrome 135 开始，视口可以延伸到 Android 的手势导航栏中。这就是无边框行为。

Android 版 Chrome 中显示的大视口，左侧为非边到边，右侧为边到边。在支持边到边显示的 Chrome 中，当 Chrome 的动态工具栏收起时，视口会延伸到手势导航栏区域。

注意：iOS 版 Chrome 在 iOS 11.3 发布后增加了无边框支持。本指南中的建议也适用于在 iOS 上运行的 Chrome。

Chrome 在非无边框设计下的行为

以下录制内容展示了 Android 版 Chrome 在不支持边到边模式时的行为：当用户滚动网页时，Chrome 的地址栏（位于顶部）会动态移开。不过，Android 原生顶部状态栏和 Android 原生底部导航栏仍会固定在原位。

旧行为：Android 上的 Chrome 不支持边到边，且已加载 https://developer.chrome.com/。

在这里，布局视口的大小会随着 Chrome 地址栏的收起或展开而变化。

Chrome 的无边框设计行为

从 Chrome 135 开始，Chrome 可以将视口延伸到手势导航栏区域，从而将 Web 内容一直绘制到设备底部边缘。

带“下巴”的动态全屏显示

默认情况下，Chrome 边到边模式会在手势导航栏区域上方显示一个新的动态底部栏，称为“下巴”。就像 Chrome 地址栏一样，当您开始滚动时，此下边栏会移开，并影响视口的大小。

在以下 Android 版 Chrome 录制内容中，随着页面向下滚动，Chrome 地址栏和下边栏都会动态收起。这会导致视口展开，从而使 Web 内容可以一直绘制到设备的底部边缘。

新行为：Android 版 Chrome 支持边到边模式，并加载了 https://developer.chrome.com/。请注意，当页面滚动时，底部下巴会滑出。

从 Chrome 135 开始，此下巴栏行为是新的默认 Chrome 行为。

默认采用无边框设计，并提供选择启用选项

专为边到边模式构建的网站可以通过调整 viewport 元标记来表明这一点。启用后，视口默认会延伸到下边缘，而不会显示下巴。

选择启用无边框设计后的新行为：网页加载时，视口会延伸至底部边缘。没有下巴。

网页可以使用 viewport 元标记及其 viewport-fit 键来指明其支持边到边。

如需选择启用边到边，请将 viewport-fit 设置为 cover 的值。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

如需详细了解 viewport-fit 的各种值，请访问 MDN。

处理可能被手势导航栏遮挡的内容

在边到边模式下，您应考虑可能会被手势导航栏遮挡的所有内容。

在大多数情况下，您无需执行任何操作，因为底部下巴会自动移开。用户仍然可以像以前一样访问您网站上的所有内容。

不过，如果您选择接受默认采用全屏模式，或者您的某个元素位于视口底部，则可能需要考虑该内容可能会被遮挡。

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
}

当“下巴”存在时，用户最初可以触及内容，但随着“下巴”消失，内容会被 Android 的导航栏遮挡。

一个网站的插图，其中包含一个位于底部的元素，其 `bottom: 0`。当底部边栏可见时，位于底部的元素会位于 Android 导航栏上方。当底部边框移开后，该元素会位于 Android 导航栏后面，此时导航栏会部分遮挡该元素。

为了缓解此问题，请使用安全区域边衬区，始终将受影响的元素放置在 Android 原生底部手势导航栏上方，或让其背景延伸到该区域。

安全区域边衬区

安全区域边衬区是四个环境变量，它们通过视口边缘的顶部、右侧、底部和左侧边衬区来定义一个矩形。

这四个值共同构成安全区域矩形，在此区域内放置内容是安全的，不会被 Android 手势导航栏等元素遮挡。

Chrome 在边到边模式下的插图，其中视口和安全区域矩形涂成黄色。由于下巴已缩回，安全区域底部边衬区可防止安全区域矩形延伸到手势导航栏中。因此，您会看到视口从手势导航栏下方探出。

使用安全区域底部边衬区

对于位于视口底部的元素，请使用 safe-area-inset-bottom 作为 bottom 属性的值，以防止其位于手势导航栏下方。随着下巴区域移开，safe-area-inset-bottom 返回的值会动态更新，从而使底部元素能够很好地保持在 Android 手势导航栏上方。

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
}

图示：一个网站，其底部元素使用 bottom 属性设置了底部安全区域边衬区。当底部边框可见时，该栏位于 Android 手势导航栏上方。当底部边栏消失时，该元素也会位于其上方。

如插图所示，结果还不完美：当底部边框移开后，剩余的页面内容会在手势导航栏区域中显示。这是因为在这种状态下，视口会延伸到手势导航栏区域。

为防止内容在底部锚定内容下方绘制，一种常用的方法是将 padding-bottom 设置为 safe-area-inset-bottom。这样，当底部边框隐藏时，底部锚定元素会自动增大。虽然这种方法确实有效，但不建议使用，因为在下巴栏移开时，会导致布局抖动。

请勿将 padding 设置为 safe-area-inset 值。

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* 🛑 Don't do this, as it causes layout thrashing. */
}

重要提示：为防止性能下降，Chrome 在检测到此模式时不会在您滚动时滑开下边栏。

使用安全区底部边衬区和安全区底部最大边衬区

相反，建议的方法是结合使用 safe-area-inset-bottom 和 safe-area-max-inset-bottom。与随着下巴移开而动态更新的动态 safe-area-inset-bottom 不同，safe-area-max-inset-bottom 表示 safe-area-inset-bottom 的最大值。

使用此 safe-area-max-inset-bottom 可预先增大底部锚定元素，并将其与 safe-area-inset-bottom 结合使用，以便将该元素向下拉，使其位于下巴后面。

将 safe-area-max-inset-bottom 与 safe-area-inset-bottom 结合使用

:root {
  --safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 36px);
  --bottom-bar-height: 50px;
}

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  height: var(--bottom-bar-height);
  padding-bottom: var(--safe-area-max-inset-bottom);
  bottom: calc(env(safe-area-inset-bottom, 0px) - var(--safe-area-max-inset-bottom));
}

body {
  padding-bottom: calc(var(--bottom-bar-height) + var(--safe-area-max-inset-bottom));
}

试用实时演示

注意：选择 safe-area-max-inset-bottom 的 36px 回退值是为了迎合不支持 safe-area-max-inset-bottom 的浏览器。之所以选择该值，是因为在 iOS 上，处于单标签页模式的 Safari 在竖屏模式下的最大底部偏移量为 36px。

重要提示：Chrome 在检测到 calc(env(safe-area-inset-bottom, …) +/- …); 模式时，会进行代码优化（即所谓的快速路径）。通过此快速路径，底部锚定内容可以随着下巴的移动而高效移动，同时下巴也会移开。

视觉效果与 padding-bottom: env(safe-area-inset-bottom, 0px); 方法相同，但性能要好得多。由于只有 bottom 的计算值需要在下巴移开时发生变化，因此不会发生布局抖动。

一个网站的图示，其中包含一个考虑了安全区域边衬区的底部锚定元素。当底部边框可见时（左图），元素位于底部边框上方。当底部边栏不可见时，该元素会在视觉上融入 Android 的手势导航栏。

注意：从 Chrome 135 开始，可以使用最大安全区域边衬区（safe-area-max-inset-bottom 及其相关属性）。

在 Chrome 135 之前试用边到边

如需在边到边功能公开发布稳定版之前试用该功能，您需要通过 chrome://flags 启用多个 Chrome 功能标志：

• EdgeToEdgeBottomChin（可选择将其设置为“Enabled Debug”，这样会将下巴的一半涂成粉色，以便更清楚地与其他界面区分开来）
• DrawCutOutEdgeToEdge
• BottomBrowserControlsRefactor（请勿设置为“Enabled”，而应设置为“Enabled Dispatch yOffset”）
• DynamicSafeAreaInsets
• DynamicSafeAreaInsetsOnScroll
• EdgeToEdgeWebOptIn
• DrawKeyNativeEdgeToEdge
• EdgeToEdgeSafeAreaConstraint（请勿设置为“已启用”，而应设置为“已启用可滚动变体”）

确保未启用以下标志：

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

重启 Chrome 两次。

我们期待您的反馈

如果您对 Chrome 及其边到边实现有任何反馈，请在“UI > Browser > Mobile > EdgeToEdge”组件中提交 Chromium bug，与我们联系。感谢您的反馈。