使用 safe-area-inset 构建移动端安全布局

背景

现代智能手机早已不再是简单的矩形屏幕。它们拥有圆角、摄像头挖孔（Notch）、动态岛（Dynamic Island）以及充当手势操作区的底部指示条（Home Indicator）。浏览器能够精确获取这些物理特征的尺寸，并通过 CSS 的 safe-area-inset 属性，将可能被系统 UI 遮挡的区域暴露给开发者。

所谓“安全区域”（Safe Area），是指屏幕上保证不被系统 UI 遮挡的部分。而 safe-area-inset 则是系统 UI 在屏幕每个边缘所占空间的测量值。通过在 CSS 中使用这些值，开发者可以确保重要内容和控件不会被系统 UI 遮挡。

如果不考虑安全区域，例如让一个悬浮的聊天按钮位于底部指示条之后，用户将无法点击它。因此，适配安全区域是移动端 Web 开发中避免布局 Bug 的关键环节。

核心内容

1. 环境变量与基础用法

CSS 提供了 safe-area-inset 相关的环境变量，使布局能够适应当前设备的安全区域。开发者可以通过 env() 函数读取这些值：

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

2. 浏览器支持与兼容性

safe-area-inset 目前已是“基线广泛可用”（Baseline Widely Available）的状态，这意味着你可以直接在生产环境中使用，几乎可以确信它在所有移动设备上都能正常工作。

虽然通常不需要考虑回退方案，但为了保险起见，可以提供以下两种回退策略：

• 针对不支持 env() 的浏览器：提供固定的 padding 回退值。

  body {
    padding-top: 1rem; /* 不支持 env() 时的回退 */
    padding-top: calc(env(safe-area-inset-top) + 1rem);
  }
  

• 针对支持 env() 但不支持特定 inset 变量的浏览器：在 env() 函数内部提供默认值。如果 safe-area-inset-top 不可用，则回退到 1rem。

  body {
    padding-top: env(safe-area-inset-top, 1rem);
  }
  

  注：这种情况纯属理论上的，因为所有支持 env() 的浏览器也都支持 safe-area-inset-* 变量。但了解这种机制对其他环境变量很有帮助。

3. 工作原理与常量特性

在演示中，调整各个 inset 值可以看到 UI 如何响应以保持可用性。需要注意的是，这些像素值并非特定于某款设备，而是展示设备如何设置这些变量以及布局如何响应。

在真实设备上，可以将这些值视为常量。它们由浏览器提供，虽然可能在横竖屏切换、操作系统更新或不同设备间有所不同，但在用户滚动或交互页面时不会动态变化。浏览器将其作为常量提供，以确保内容不被系统 UI 遮挡。

4. 为什么需要主动适配？

默认情况下，浏览器会防止网站内容被刘海或底部指示条遮挡，内容默认是安全的。但这有一个缺点：浏览器会缩小视口（Viewport）以保留空间，导致页面两侧或顶部出现不必要的留白，视觉效果不佳。

为了获得更好的视觉效果，我们希望内容能够**边缘到边缘（Edge-to-Edge）**显示，同时确保不被系统 UI 遮挡。这需要两个步骤：

1. 启用全屏视口：在 <meta> 标签中添加 viewport-fit=cover。

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

   这会让浏览器将页面拉伸至边缘。此时，内容可能会位于动态岛或底部指示条之后。viewport-fit=cover 告诉浏览器：由开发者负责确保内容不被系统 UI 遮挡。

2. 手动处理安全区域：使用 env(safe-area-inset-*) 将元素从系统 UI 后方移开。

   .content {
     padding-right: env(safe-area-inset-right);
     padding-left: env(safe-area-inset-left);
   }
   

5. 需要关注的布局场景

一旦启用了全屏视口，开发者必须考虑以下元素是否被遮挡：

• 固定头部和导航栏：需要在刘海/动态岛/摄像头挖孔或底部指示条上方或下方留出足够空间。
• 悬浮聊天或帮助按钮：必须保持在安全区域内。
• 全屏对话框和抽屉：高度应正确，不被底部指示条遮挡。
• 位于屏幕角落的地图或视频控件。

6. 安全区域不等于边距

safe-area-inset 定义的是系统 UI 占据的确切空间。这意味着它不提供系统 UI 边缘与内容之间的额外边距。

如果仅将 padding 设置为 safe-area-inset 的值，内容将紧贴系统 UI 边缘。为了增加呼吸感，建议结合 calc() 添加额外的 padding：

body {
  padding-top: calc(env(safe-area-inset-top) + 1rem);
  padding-right: calc(env(safe-area-inset-right) + 1rem);
  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
  padding-left: calc(env(safe-area-inset-left) + 1rem);
}

7. 移动端特性与测试陷阱

env() 函数跨浏览器和平台支持，但 safe-area-inset-* 变量仅在移动设备上具有非零值。

• 桌面浏览器：始终返回 0，因为桌面浏览器页面上方没有系统 UI。
• 测试陷阱：在 Chrome 的响应式视图（Responsive View）中测试时，安全区域 inset 通常仍为 0，导致开发阶段难以发现问题。

由于真实设备测试常被推迟到项目后期，此时修复布局以适应安全区域的成本很高，且 Bug 容易流入生产环境。更糟糕的是，这些问题往往只影响特定设备，可能长期未被察觉。

8. 工具推荐：Polypane

Polypane 是首个也是唯一一款支持模拟安全区域 inset 的桌面浏览器。它在 Polypane 中的每个设备都提供了正确的横竖屏安全区域 inset 值，并支持可视化展示不安全区域（蓝色表示 inset，粉色表示小视口高度差异）。此外，Polypane 还支持模拟 svh（小视口高度），这是另一个相关话题。

9. 具体案例：解决悬浮按钮问题

一个常见的问题是悬浮按钮最终位于底部指示条之后，导致无法点击。

.chat-button {
  position: fixed;
  right: 10px;
  bottom: 10px;
}

通过切换定位方式，使用 safe-area-inset-bottom 和 safe-area-inset-right 替代硬编码的偏移量，可以确保按钮始终位于安全区域内。

10. 未来展望：safe-area-max-inset

规范中还描述了 safe-area-max-inset-* 变量。虽然目前尚未广泛支持，但值得提及，因为它可能为处理更复杂的安全区域场景提供新的解决方案。

关键要点

• 现代屏幕非矩形：刘海、动态岛、圆角和底部手势条要求开发者使用 safe-area-inset 来避免内容被遮挡。
• 基线可用：safe-area-inset 已广泛支持，可直接用于生产环境，无需过度担心兼容性回退。
• 全屏视口需手动适配：使用 viewport-fit=cover 实现边缘到边缘显示后，必须手动使用 env() 函数处理安全区域，否则内容会被系统 UI 遮挡。
• 常量而非动态值：安全区域 inset 值在页面加载后是常量，不会随滚动或交互改变，但会随设备方向或型号变化。
• 结合 calc() 增加边距：safe-area-inset 仅