uniapp ioss上下安全区如何适配

在 UniApp 中适配 iOS 上下安全区（如 iPhone X 及以上机型的刘海屏和底部 Home 指示条区域），主要通过 CSS 变量和 API 实现。以下是具体方法：

1. 使用 CSS 环境变量

• 在 pages.json 的 globalStyle 或页面样式中，添加 safe-area-inset-top 和 safe-area-inset-bottom 变量：

  .safe-area-page {
      padding-top: calc(env(safe-area-inset-top) + 10px); /* 顶部安全区 + 自定义间距 */
      padding-bottom: calc(env(safe-area-inset-bottom) + 10px); /* 底部安全区 + 自定义间距 */
  }
  

• 在页面中应用样式类：

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

2. 使用 UniApp 内置 CSS 类

• UniApp 提供了 safe-area-top 和 safe-area-bottom 类，可直接在元素上使用：

  <template>
    <view class="safe-area-top">
      顶部内容
    </view>
    <view class="content">
      主体内容
    </view>
    <view class="safe-area-bottom">
      底部内容
    </view>
  </template>
  

3. 动态获取安全区高度（JS 方法）

• 使用 uni.getSystemInfoSync() 获取安全区信息：

  const systemInfo = uni.getSystemInfoSync();
  const safeAreaTop = systemInfo.safeArea?.top || 0; // 顶部安全区高度
  const safeAreaBottom = systemInfo.screenHeight - systemInfo.safeArea?.bottom || 0; // 底部安全区高度
  

• 在页面中动态设置样式：

  <template>
    <view :style="{ paddingTop: safeAreaTop + 'px', paddingBottom: safeAreaBottom + 'px' }">
      内容区域
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        safeAreaTop: 0,
        safeAreaBottom: 0
      };
    },
    onLoad() {
      const systemInfo = uni.getSystemInfoSync();
      this.safeAreaTop = systemInfo.safeArea?.top || 0;
      this.safeAreaBottom = systemInfo.screenHeight - systemInfo.safeArea?.bottom || 0;
    }
  };
  </script>
  

4. 注意事项

• 测试：在真机或模拟器中测试，确保安全区适配正确。
• 兼容性：env(safe-area-inset-*) 需 iOS 11+ 支持，UniApp 已处理兼容性。
• 固定定位元素：对于底部导航栏等，需显式设置 padding-bottom 或 margin-bottom 避免内容被遮挡。

总结

优先使用 CSS 环境变量或内置类实现适配，简单高效。若需动态计算，再结合 JS 方法。确保内容不被刘海或 Home 条遮挡，提升用户体验。