直接用 uni.getSystemInfoSync().statusBarHeight 即可获取状态栏高度（px），iOS/Android 真机稳定，需真机调试；H5 返回 0，微信小程序需结合 getMenuButtonBoundingClientRect 计算导航栏高度，rpx 转换用 uni.upx2px()，safeAreaInsets.bottom 跨端兼容性差需降级处理。
直接用 uni.getSystemInfoSync().statusBarHeight 就够了
绝大多数场景下，uni.getSystemInfoSync() 返回的对象里就有 statusBarHeight，单位是 px，iOS 和 Android 真机都稳定可用。它同步执行、不依赖回调，不会出现“取到 undefined”的问题。
常见错误现象：有人在 onLoad 里调用异步版 uni.getSystemInfo()，却在 success 回调外直接读 res.statusBarHeight，结果是 undefined；还有人误以为要先调 uni.getDeviceInfo()，其实它根本不返回 statusBarHeight。
注意点：
-
statusBarHeight在模拟器中可能不准（比如微信开发者工具常返回 20），必须真机调试验证 - 不要在
data里写死默认值（如statusBarHeight: 20），应初始化为0或null，等生命周期钩子就绪后再赋值 - H5 端该值始终为 0（因为浏览器无状态栏概念），需单独处理
微信小程序里想对齐胶囊按钮？得配合 uni.getMenuButtonBoundingClientRect()
仅靠 statusBarHeight 不足以还原原生导航栏高度——微信右上角那个胶囊按钮的位置和尺寸才是关键。它的顶部距离屏幕顶端（top）减去状态栏高度，再乘以 2，加上自身高度（height），就是完整标题栏高度。
公式是：navigationBarHeight = (menuButton.top - statusBarHeight) * 2 + menuButton.height
使用要点：
- 必须在
onShow或onMounted后调用，不能在created阶段 —— 小程序环境未就绪时会返回空对象或报错 - 要用
try/catch包裹，部分低端机型或旧基础库版本可能不支持该 API - 该 API 仅在微信/支付宝/百度等小程序平台有效，App 和 H5 端调用会失败
rpx 单位下怎么用？别手动除算，用 uni.upx2px()
拿到的 statusBarHeight 是 px，但你在样式里用的是 rpx，硬套 (height / screenWidth) * 750 容易因四舍五入出偏差，尤其在小数值（如 20px → 40rpx）时更明显。
正确做法是交给 uni-app 自带转换函数：
const systemInfo = uni.getSystemInfoSync() const statusBarPx = systemInfo.statusBarHeight const statusBarRpx = uni.upx2px(statusBarPx) // 注意：这个函数输入是 px，输出是 rpx 数值
注意：uni.upx2px() 的参数是「px 值」，不是字符串；它在 App 和小程序端可靠，H5 端需降级为固定值（如 44）。
安全区底部（safeAreaInsets.bottom）别盲目依赖
很多人看到文档里有 safeAreaInsets 就直接用，结果在支付宝小程序或 H5 上崩了——这个字段跨端兼容性极差：
- iOS App：稳定返回
{ top, right, bottom, left } - 微信小程序：基础库 ≥ 2.10.4 才支持，且必须
onShow后调用 - 支付宝小程序：完全不支持，只能硬编码 fallback（如
bottom: 34） - H5：压根没这个字段，得用 CSS
env(safe-area-inset-bottom)+ 内联 style 覆盖
真正稳妥的做法是混合 fallback：CSS 层先写 padding-bottom: env(safe-area-inset-bottom)，JS 层只在能取到 safeAreaInsets 时才覆盖，否则保持默认。
最常被忽略的一点：即使你拿到了 safeAreaInsets.bottom，也得同步改 padding-bottom 或 margin-bottom，只改容器 height 无法避免底部指示条遮挡按钮。
