适配刘海屏的方案，核心在于获取安全区域，避免内容被刘海或底部 Home Indicator 遮挡。前端开发中，主要有以下几种方案：

CSS 环境变量 env() 和 constant()

这是目前最推荐的适配方案，兼容性好，使用方便。

• safe-area-inset-\* 变量：这些变量分别代表安全区域距离屏幕边缘的距离，包括 safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom 和 safe-area-inset-left。

• env() 函数(iOS > 11.2 兼容)：这是 CSS 中新增的一个函数，用于获取环境变量。可以使用 env(safe-area-inset-top) 来获取安全区域距离顶部的距离。

• constant() 函数 (iOS < 11.2 兼容)：由于 iOS 11.2 之前的版本不支持 env()，需要使用 constant() 函数作为 fallback。

示例

body {
  padding: constant(safe-area-inset-top) constant(safe-area-inset-right)
    constant(safe-area-inset-bottom) constant(safe-area-inset-left); /* iOS < 11.2 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(
      safe-area-inset-bottom
    ) env(safe-area-inset-left); /* iOS >= 11.2 */
}

viewport-fit meta 标签

配合 safe-area-inset-* 使用，控制 viewport 的大小和位置。

• viewport-fit=contain： viewport 完全包含在安全区域内，这是默认行为。
• viewport-fit=cover： viewport 覆盖整个屏幕，包括刘海区域。需要配合 safe-area-inset-* 变量调整内容位置。
• viewport-fit=auto： 等同于 contain。

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

JavaScript 动态判断

可以通过 JavaScript 获取屏幕尺寸和安全区域信息，然后动态调整布局。不过这种方式相对复杂，且性能不如 CSS 方案。 一般不推荐，除非 CSS 无法满足需求。

// 获取安全区域信息 (需要在页面加载完成后执行)
if (
  window.visualViewport &&
  typeof window.visualViewport.offsetTop !== "undefined"
) {
  const top = window.visualViewport.offsetTop;
  const right =
    window.innerWidth -
    window.visualViewport.offsetLeft -
    window.visualViewport.width;
  const bottom =
    window.innerHeight -
    window.visualViewport.offsetTop -
    window.visualViewport.height;
  const left = window.visualViewport.offsetLeft;

  // 根据安全区域信息调整布局
  // ...
}

一些补充说明：

• 单位： safe-area-inset-* 变量的值单位是 px。
• 背景颜色： 如果背景颜色需要延伸到刘海区域，可以设置 background-color 为 body 或更上层元素。
• 兼容性： CSS 方案的兼容性较好，基本覆盖了所有支持刘海屏的设备。
• 测试： 建议在真机上测试适配效果，模拟器不一定能完全反映真实情况。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24