uniapp 底部安全区和刘海屏适配如何处理？

在 UniApp 中处理底部安全区和刘海屏适配，主要通过以下方法实现，确保应用在不同设备上显示正常：

1. 使用 CSS 环境变量适配安全区

• 对于底部安全区（如 iPhone 的 Home Indicator 区域），使用 env(safe-area-inset-bottom) 设置底部内边距或外边距。
• 示例代码（在页面的 <style> 中）：

  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom); /* 自动适配底部安全区高度 */
    background-color: #fff; /* 根据需要设置背景色 */
  }
  

• 在模板中应用：

  <view class="safe-area-bottom">
    内容区域
  </view>
  

• 说明：env(safe-area-inset-bottom) 会自动获取设备底部安全区高度，非安全区设备则默认为 0。

2. 刘海屏适配

• 使用 uni.getWindowInfo() 获取窗口信息，动态调整布局。
• 示例代码（在 Vue 页面的 <script> 中）：

  export default {
    data() {
      return {
        statusBarHeight: 0,
        safeAreaInsets: {}
      };
    },
    onLoad() {
      const windowInfo = uni.getWindowInfo();
      this.statusBarHeight = windowInfo.statusBarHeight; // 状态栏高度
      this.safeAreaInsets = windowInfo.safeAreaInsets; // 安全区域信息（包括顶部刘海区域）
    }
  };
  

• 在模板中动态设置样式：

  <view :style="{ paddingTop: statusBarHeight + 'px' }">
    顶部内容，避免被刘海遮挡
  </view>
  

3. 全局样式设置

• 在 App.vue 的全局样式中添加安全区适配，确保所有页面生效：

  page {
    padding-bottom: env(safe-area-inset-bottom);
  }
  

• 注意：部分安卓设备可能不支持 env()，需测试兼容性。

4. 使用 UniApp 条件编译

• 针对不同平台（如 APP-PLUS、H5）进行适配：

  /* #ifdef APP-PLUS */
  .safe-area {
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* #endif */
  

注意事项：

• 测试多设备：在真机上测试 iOS 和安卓设备，确保布局正确。
• 兼容性：env() 在部分低版本浏览器或安卓设备可能不生效，可考虑使用 constant() 作为备选（iOS 旧版本）。
• 动态内容：如果内容动态变化，使用 JavaScript 计算安全区高度更灵活。

通过以上方法，可有效处理底部安全区和刘海屏适配，提升用户体验。