适配刘海屏的方案有哪些呢？

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

1. 使用 CSS 环境变量 env() 和 constant()：

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

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

• 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 */
}

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">

3. 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 方案的兼容性较好，基本覆盖了所有支持刘海屏的设备。
• 测试： 建议在真机上测试适配效果，模拟器不一定能完全反映真实情况。

最佳实践：

推荐结合 viewport-fit=cover 和 safe-area-inset-* 变量，既能覆盖全屏，又能避免内容被刘海遮挡。

通过以上方法，可以有效适配各种刘海屏设备，确保页面内容显示完整，用户体验良好。 选择哪种方案取决于你的具体需求和项目情况。 通常情况下，CSS 方案足以应对大多数场景。