Android 版 Chrome 边到边迁移指南

发布时间:2025 年 2 月 28 日

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

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

随处可见的酒吧

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

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

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

一张插图,显示了 Android 设备的顶部部分,其中突出显示了系统栏。
Android 上的状态栏突出显示source

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

一张插图,显示了 Android 设备底部,其中显示了手势导航栏。
手势导航栏 source)。

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

Chrome 实现无边框

当您访问某个网站时,该网站会显示在一个矩形中,称为(布局)视口

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

一张插图,显示了搭载 Android 版 Chrome 的 Android 设备,其屏幕并非从边到边。左侧插图显示了地址栏处于展开状态的 Chrome。地址栏和手势导航栏之间有一个突出显示的绿色框,大小为 100svh。右侧的插图显示了收起地址栏的 Chrome。状态栏和手势导航栏之间有一个突出显示的绿色框,大小为 100lvh。视口本身带有蓝色虚线轮廓。
在 Chrome 135 之前,Android 版 Chrome 中视口的大小下限和上限。这些尺寸称为小视口和大视口。视口本身带有蓝色虚线轮廓。

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

一张插图,显示了 Android 版 Chrome 中非边到边的视口(左侧),以及 Android 版 Chrome 中边到边的视口(右侧)。每个可视化图表都有一个蓝色方框,表示高度为 100vh 的元素。左侧的文字说明了当边框不占满屏幕时会出现什么情况。其中显示“视口仍夹在顶部状态栏和底部手势导航栏之间”。右侧的文字说明了当边到边边栏处于启用状态时会发生什么情况。其中显示“视口延伸到手势导航栏”。
Android 版 Chrome 中显示的非边对边的大视口(左)和 Chrome 中显示的边对边的大视口(右)。在支持边到边的 Chrome 中,当 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 的导航栏遮挡。

一张插图,显示了搭载 Android 版 Chrome 的 Android 设备,屏幕从边到边。左侧插图显示了 Chrome 的下巴。底部锚定的内容(以红色显示)就位于其上方。右侧的插图显示了 Chrome 的下巴不可见。在这种情况下,底部固定的内容会贴靠在设备的底部边缘。随附的文本说明,底部位置的内容现在被手势导航栏遮挡。
一张示例图片,显示了一个网页,其中包含一个底部定位的元素,其 CSS 为 `bottom: 0`。当下巴可见时,底部定位的元素位于 Android 的导航栏上方。当下巴移开后,该元素会位于 Android 导航栏后面,此时导航栏会部分遮挡该元素。

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

安全区域内嵌

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 65.
  • Safari: 11.

Source

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

这四个值组合起来形成安全区域矩形,您可以在其中放置内容,这样内容就不会被 Android 手势导航栏等内容遮挡。

一张插图,显示了一部 Android 设备,其中 Chrome 处于无边框模式。下巴有滑出式视图。Chrome 中显示的是用黄色绘制的安全区域矩形。其底部边缘位于手势导航栏上方。在手势导航栏中绘制的是视口的底部部分,绘制为蓝色。随附的文字说明,安全区域矩形通过 safe-area-bottom-inset 嵌入视口,这会防止内容在手势导航栏下方绘制。
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);
}
一张插图,显示了一部 Android 设备,其中 Chrome 处于无边框模式。在左侧的可视化图表中,下巴可见,底部锚定的内容位于其上方。在右侧的直观化图表中,下巴不可见,并且底部锚定的内容与左侧的内容位于同一位置。这会导致常规内容显示在手势导航栏下方。
一张示例图片,显示了一个网站,其中底部位置的元素使用了底部安全区域内嵌,并带有 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);
}

使用安全区域底部内边距和安全区域底部最大内边距

建议的方法是组合使用 safe-area-inset-bottomsafe-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-bottomsafe-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));
}

试用实时演示

视觉结果与 padding-bottom: env(safe-area-inset-bottom, 0px); 方法相同,但性能要好得多。由于只有 bottom 的计算值需要随着下巴向后移动而更改,因此不会发生布局抖动。

一张插图,显示了一部 Android 设备,其中 Chrome 处于无边框模式。在左侧的可视化图表中,下巴可见,底部锚定的内容位于其上方。在右侧的直观图中,下巴不可见,底部锚定的内容在视觉上扩大了,占据了下巴原来所在的位置。这样可以获得出色的视觉效果,并防止常规网页内容从手势导航栏区域下方显示。
一张插图,显示了一个底部锚定的元素,该元素考虑了安全区域内嵌。当下巴可见时(左侧),元素位于下巴上方。当下巴不可见时,该元素会在视觉上渗入 Android 的手势导航栏。

在 Chrome 135 之前试用边到边

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

  • EdgeToEdgeBottomChin (可选将其设置为“已启用调试”将会将下巴的一半涂成粉色,以更清晰地将其与其他界面区分开来)
  • DrawCutOutEdgeToEdge
  • BottomBrowserControlsRefactor (请勿设置为“已启用”,而应设置为“已启用 Dispatch yOffset”)
  • DynamicSafeAreaInsets
  • DynamicSafeAreaInsetsOnScroll
  • EdgeToEdgeWebOptIn
  • DrawKeyNativeEdgeToEdge
  • EdgeToEdgeSafeAreaConstraint(请勿设置为“已启用”,而应设置为“已启用可滚动变体”)

确保启用以下标志:

  • DrawNativeEdgeToEdge
  • EdgeToEdgeEverywhere

重启 Chrome 两次

我们期待您的反馈

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