uni-app需通过uni.getSystemInfo获取safeAreaInsets，但各平台支持不一：iOS App稳定支持，微信小程序需2.10.4+且onShow后调用，H5不支持需CSS模拟，支付宝小程序不支持需硬编码fallback。
uni-app里怎么读取safeAreaInsets
uni-app没有内置的 safeAreaInsets API，但可以通过 uni.getSystemInfo 拿到原始系统信息，再手动提取安全区偏移值。iOS 和部分安卓全面屏机型（如华为、小米）会返回 safeAreaInsets 字段，但微信小程序、H5、App端行为不一致——不是所有平台都支持。
- App端（iOS）：稳定返回
safeAreaInsets，含top、right、bottom、left - 微信小程序：基础库 2.10.4+ 才有，且需在
onShow后调用才可靠 - H5：永远为空，浏览器无此概念，得靠 CSS 媒体查询或 UA 判断模拟
- 支付宝小程序：不支持该字段，只能硬编码 fallback
uni-app底部安全距离适配的三种写法
不能只靠 JS 计算，必须配合样式层处理。常见错误是只改高度不改定位，导致按钮被遮挡或留白过多。
- 用
env(safe-area-inset-bottom)：CSS 原生方案，仅 iOS 和部分安卓 WebView 支持，H5 和旧版微信无效 - 用
uni.getSystemInfo+ 动态 class：最稳妥，JS 获取后通过setData或响应式变量控制样式类名，比如加safe-bottom - 混合 fallback：先写
padding-bottom: env(safe-area-inset-bottom)，再用内联 style 覆盖（如:style="{ paddingBottom: safeBottom + 'px' }"），确保降级可用
示例片段：
<view class="tabbar" :style="{ paddingBottom: safeBottom + 'px' }"></view>，其中 safeBottom 来自 uni.getSystemInfo 返回值或默认 0。
为什么uni.getSystemInfo同步拿不到safeAreaInsets
因为这个字段不是初始化就有的，尤其在小程序里，需要页面渲染完成、系统环境就绪后才可读取。直接在 onLoad 里调用大概率拿到 undefined。
- 微信小程序：必须在
onShow或onReady后调用，且建议加setTimeout延迟 100ms 更稳 - App端：iOS 启动时就能读，但 Android 需等
plus.screen就绪，推荐监听plusready事件 - 别在
data初始化时硬写默认值，应设为null或0，等回调后再更新
安卓全面屏底部指示条的特殊处理
安卓的“导航栏”不是安全区，而是可隐藏的系统 UI；有些厂商（如 OPPO、vivo）把虚拟按键做成了常驻状态栏，但 safeAreaInsets.bottom 不一定反映它——这时候 JS 拿到的值可能为 0，但实际需要留空。
- 不能只信
safeAreaInsets，要结合screenHeight和windowHeight差值估算：若差值 > 60，大概率存在不可见导航栏 - 微信小程序安卓端可尝试
wx.getMenuButtonBoundingClientRect()辅助判断顶部状态栏，但对底部无效 - 终极 fallback：给底部操作区域预留至少
env(safe-area-inset-bottom, 16px)，再加一层媒体查询@supports (padding-bottom: env(safe-area-inset-bottom)) { ... }做增强
真机调试时，务必在 iPhone X/XS/12/15 和华为 Mate 系列、小米 13 上分别验证，不同屏幕比例和系统版本表现差异很大。
