Android 版 Chrome 边到边迁移指南

Bramus

发布时间：2025 年 2 月 28 日

边到边是 Android 的一项功能，可让应用在 Android 系统栏后面绘制，从而跨越显示屏的整个宽度和高度。

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

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

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

随处可见的酒吧

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

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

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

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

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

手势导航栏 （source）。

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

Chrome 实现无边框

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

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

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

从 Chrome 135 开始，视口可以延伸到 Android 的手势导航栏。这种行为被称为“无边框”。

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

注意 ：iOS 11.3 发布后，iOS 版 Chrome 添加了对边到边显示的支持。本指南中的建议也适用于在 iOS 上运行的 Chrome。

不支持无边框设计的 Chrome 行为

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

旧行为：Android 版 Chrome 不支持边到边，并且加载了 https://developer.chrome.com/。

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

无边框设计的 Chrome 行为

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

动态边对边，带有“下巴”

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

在以下录制的 Android 版 Chrome 视频中，Chrome 地址栏和下巴会随着页面向下滚动而动态收起。这会导致视口扩展，从而允许将网页内容绘制到设备底部边缘。

新行为：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 的导航栏遮挡。

一张示例图片，显示了一个网页，其中包含一个底部定位的元素，其 CSS 为 `bottom: 0`。当下巴可见时，底部定位的元素位于 Android 的导航栏上方。当下巴移开后，该元素会位于 Android 导航栏后面，此时导航栏会部分遮挡该元素。

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

安全区域内嵌

Browser Support

• 69
• 79
• 65
• 11

Source

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

这四个值组合起来形成安全区域矩形，您可以在其中放置内容，这样内容就不会被 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 设置为安全区域内边距值。

.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-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 的浏览器的需求，系统选择了 safe-area-max-inset-bottom 的 36px 回退值。之所以选择此值，是因为在 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 （可选将其设置为“已启用调试”将会将下巴的一半涂成粉色，以更清晰地将其与其他界面区分开来）
• DrawCutOutEdgeToEdge
• BottomBrowserControlsRefactor （请勿设置为“已启用”，而应设置为“已启用 Dispatch yOffset”）
• DynamicSafeAreaInsets
• DynamicSafeAreaInsetsOnScroll
• EdgeToEdgeWebOptIn
• DrawKeyNativeEdgeToEdge
• EdgeToEdgeSafeAreaConstraint（请勿设置为“已启用”，而应设置为“已启用可滚动变体”）

确保未启用以下标志：

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

重启 Chrome 两次。

我们期待您的反馈

如果您对 Chrome 及其边到边实现有任何反馈，请在“界面 > 浏览器 > 移动 > EdgeToEdge”组件中提交 Chromium bug 与我们联系。感谢您的反馈。