uniapp ios safe area如何处理

在uniapp开发中，iOS设备的safe area（安全区域）应该如何处理？特别是在iPhone X及以上机型，底部和顶部的内容容易被刘海或底部横条遮挡。请问有什么官方推荐的解决方案或者CSS样式可以适配？目前尝试过padding-top和padding-bottom，但在某些机型上效果不一致。

2 回复

在uniapp中处理iOS安全区域，可以使用CSS变量env(safe-area-inset-bottom)等，或使用uni-app提供的uni.getSystemInfoSync()获取安全区域信息，再动态设置样式。


在 UniApp 中处理 iOS 安全区域（Safe Area）主要是为了适配 iPhone X 及以上机型的刘海屏和底部 Home 指示条，避免内容被遮挡。以下是处理方法：

1. 使用 CSS 环境变量

在样式文件中，通过 env(safe-area-inset-bottom) 等变量动态调整边距：

.page {
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx); /* 底部留出安全区域 */
}

相关变量：

  • safe-area-inset-top：顶部安全距离
  • safe-area-inset-right：右侧安全距离
  • safe-area-inset-bottom：底部安全距离
  • safe-area-inset-left：左侧安全距离

2. 在页面 JSON 中配置

在页面的 .json 文件中添加：

{
  "style": {
    "navigationBarTitleText": "页面标题",
    "app-plus": {
      "safeArea": {
        "bottom": {
          "offset": "auto" // 自动适配底部安全区域
        }
      }
    }
  }
}

3. 使用 <safe-area/> 组件（仅限 NVUE 页面）

在 NVUE 页面中，可用 <safe-area> 组件包裹内容：

<template>
  <safe-area>
    <div>页面内容</div>
  </safe-area>
</template>

4. 全局样式适配

在 App.vue 的全局样式中添加：

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

注意事项：

  • 测试：需在真机或模拟器中测试效果。
  • 兼容性：env() 需 iOS 11+ 支持，UniApp 默认已处理兼容。
  • NVUE 页面：仅支持 <safe-area> 组件，CSS 变量可能不生效。

通过以上方法，可确保内容在 iOS 设备上正常显示，避免被刘海或底部条遮挡。

回到顶部