uniapp safe-area 的实现方法和常见问题解析

在 UniApp 中，safe-area 主要用于适配不同设备的屏幕安全区域（如 iPhone 的刘海屏、底部 Home 条），避免内容被遮挡。以下是实现方法和常见问题解析：

实现方法

1. 使用 CSS 环境变量
   UniApp 内置了 env(safe-area-inset-top)、env(safe-area-inset-bottom) 等 CSS 变量，直接通过样式适配安全区域：

   .page {
     padding-top: env(safe-area-inset-top); /* 顶部安全区域 */
     padding-bottom: env(safe-area-inset-bottom); /* 底部安全区域 */
   }
   

2. 通过 uni.getSystemInfoSync() 动态获取
   在 JS 中获取安全区域尺寸，灵活调整布局：

   const systemInfo = uni.getSystemInfoSync();
   const safeArea = systemInfo.safeArea; // 安全区域坐标信息
   const safeAreaInsets = systemInfo.safeAreaInsets; // 各边安全距离（HBuilderX 3.1.0+）
   

3. 结合 uni.addSafeAreaInsets() 监听变化
   针对动态调整安全区域（如横竖屏切换）的场景：

   uni.addSafeAreaInsets((res) => {
     console.log('安全区域变化:', res.insets);
   });
   

常见问题与解决

1. 环境变量不生效

   • 原因：未设置 viewport-fit=cover。
   • 解决：在 pages.json 的全局样式或页面样式中添加：

     {
       "style": {
         "navigationStyle": "custom",
         "app-plus": {
           "safeArea": {
             "background": "#FFFFFF",
             "bottom": { "offset": "auto" }
           }
         }
       }
     }
     

2. 底部安全区域适配异常

   • 场景：底部固定元素（如选项卡）被遮挡。
   • 解决：通过 padding-bottom 或 margin-bottom 预留空间：

     .tab-bar {
       padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
     }
     

3. Android 设备兼容性问题

   • 现象：部分 Android 机型无法识别 env(safe-area-inset-*)。
   • 解决：
     • 使用 uni.getSystemInfoSync().safeAreaInsets 动态计算。
     • 通过条件编译区分平台处理。

4. 自定义导航栏与安全区域冲突

   • 方案：在 pages.json 中设置 "navigationStyle": "custom"，并手动预留顶部安全距离：

     .custom-navbar {
       padding-top: env(safe-area-inset-top);
       height: calc(88px + env(safe-area-inset-top)); /* 88px为导航栏原高度 */
     }
     

总结

• 优先使用 CSS 变量：简单场景直接通过 env(safe-area-inset-*) 实现。
• 动态监听适配复杂场景：通过 JS API 获取或监听安全区域变化。
• 测试多平台：在 iOS 和主流 Android 机型上验证兼容性。