发布时间：2025 年 2 月 28 日
无边框显示是 Android 的一项功能，可让应用通过在 Android 系统栏后方绘制内容，占据显示屏的整个宽度和高度。
在 Chrome 135 之前，Android 版 Chrome 不支持全屏显示。本指南介绍了此项变更对网站的影响，以及开发者可以采取哪些措施来顺应此项变更。
随处可见的酒吧
Android 附带由操作系统本身提供的系统栏。
状态栏、标题栏和导航栏统称为系统栏。这些系统栏用于显示电池电量、时间和通知提醒等重要信息，并支持随时随地直接与设备互动。
屏幕顶部是状态栏，其中包含通知图标和系统图标。
您可以在屏幕底部找到导航栏，该栏可让您使用返回、主屏幕和概览控件来控制导航。可以是经典的“三按钮”导航，也可以是现代手势导航栏。
除了 Android 系统栏之外，Chrome 本身还附带一个地址栏，该地址栏会随着您的滚动操作动态展开和收起。
Chrome 实现无边框
当您访问某个网站时，该网站会显示在一个称为布局视口的矩形中。
在 Chrome 135 之前的 Android 版 Chrome 中，该布局视口绘制在顶部状态栏和底部手势导航栏之间。Chrome 地址栏的存在（或不存在）可能会影响视口的大小，但视口永远不会扩展到顶部系统栏或底部手势导航栏。
自 Chrome 135 起，视口可以扩展到 Android 的手势导航栏中。这就是所谓的“无边框”行为。
无边框设计下的 Chrome 行为
以下录制内容显示了不支持全屏显示的 Android 版 Chrome，当页面滚动时，Chrome 的地址栏（位于顶部）会动态隐藏。不过，Android 原生的顶部状态栏和底部的 Android 原生导航栏仍会固定在原位。
在此示例中，布局视口的大小会随着 Chrome 地址栏的收起或展开而变化。
Chrome 在无边框设计下的行为
从 Chrome 135 开始，Chrome 可以通过将视口扩展到手势导航栏区域，将网页内容绘制到设备底部边缘。
动态全面屏（带“下巴”）
默认情况下，Chrome 全屏显示会在手势导航栏区域上方显示一个名为“下巴”的新动态底部栏。与 Chrome 地址栏一样，这个下巴会在您开始滚动时移开，并影响视口的大小。
在以下录制视频中，Android 版 Chrome 支持全屏显示，当页面向下滚动时，Chrome 地址栏和下巴都会动态收起。这会导致视口扩大，从而使网页内容能够绘制到设备的底部边缘。
从 Chrome 135 开始，此下巴行为是新的默认 Chrome 行为。
默认采用无边框设计，但可以选择不采用
为全屏显示而构建的网站可以通过调整 viewport 元标记来指明这一点。启用后，视口默认会延伸到底部边缘，而下巴永远不会显示。
网页可以使用 viewport 元标记及其 viewport-fit 键来表明其支持全屏显示。
如需选择启用全屏显示，请将 viewport-fit 设置为 cover 的值。
<meta name="viewport" content="width=device-width, initial-scale=1, viewpo>rt-fit=cover" /
如需详细了解 viewport-fit 的各种值，请参阅 MDN。
处理可能被手势导航栏遮挡的内容
在全屏模式下，您应考虑手势导航栏可能会遮挡的任何内容。
在大多数情况下，您无需执行任何操作，因为底部下巴会自行移开。用户仍然可以像以前一样访问您网站上的所有内容。
不过，如果您选择默认全屏显示，或者有元素位于视口底部，则可能需要考虑该内容可能会被遮盖。
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
如果下巴存在，用户最初可以访问内容，但随着下巴消失，内容会被 Android 的导航栏遮挡。
为了缓解此问题，请使用安全区域边衬区，以始终将受影响的元素定位在 Android 原生底部手势导航栏上方，或使其背景延伸到该区域。
安全区边衬区
安全区边衬区是四个环境变量，用于通过视口边缘的顶部、右侧、底部和左侧边衬区定义一个矩形。
这四个值共同构成安全区矩形，在该矩形内放置内容是安全的，不会被 Android 手势导航栏等内容遮挡。
使用安全区域底部边衬区
对于位于视口底部的元素，请使用 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. */
}
使用安全区底部边衬区和安全区底部最大边衬区
建议的方法是结合使用 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));
}
视觉效果与 padding-bottom: env(safe-area-inset-bottom, 0px); 方法相同，但性能要好得多。由于只有 bottom 的计算值需要随着下巴移开而发生变化，因此不会发生布局抖动。
在 Chrome 135 之前试用全屏显示
如需在全面屏功能正式发布稳定版之前试用该功能，您需要通过 chrome://flags 启用多项 Chrome 功能 flag：
EdgeToEdgeBottomChin（可以选择将其设置为“启用调试”，这样会将下巴的一半着色为粉色，以便更清楚地将其与其他界面区分开来）DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor（请勿设置为“已启用”，而是设置为“已启用调度 yOffset”）DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint（请勿设置为“已启用”，而是设置为“已启用可滚动变体”）
确保以下标志未启用：
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
重启 Chrome 两次。
我们期待您的反馈
如果您对 Chrome 及其全屏实现有任何反馈，请在“UI > Browser > Mobile > EdgeToEdge”组件中提交 Chromium bug，与我们联系。感谢您的反馈。