uni-app 的 statusBarHeight 直接读取系统 API 原始值，iOS 常见 44px、安卓 24–30px、微信小程序固定 25px、H5 为 0 或 20；不可硬编码，须在 onMounted 中同步获取并用于布局占位。
uni-app里statusBarHeight怎么来的
uni-app 的 statusBarHeight 不是靠公式“算”出来的，而是直接从系统 API 读取的原始值。调用 uni.getSystemInfoSync().statusBarHeight 返回的就是当前设备操作系统上报的真实像素高度，iOS 刘海屏常见 44px，安卓多为 24–30px，微信小程序固定 25px —— 这些差异由平台原生层决定，uni-app 只做透传。
为什么不能用固定值写死
硬编码 statusBarHeight: 25 或 44 在跨端时必然出错：
- 在 H5 环境下，浏览器没有“状态栏”概念，
statusBarHeight实际返回 0（或部分版本 fallback 为 20），但你写了 44，顶部就会多出空白 - iPhone 14 Pro 和 iPhone 8 的刘海尺寸不同，同一套代码在两者上显示错位
- 某些安卓厂商（如华为、小米）会动态调整状态栏高度（比如开启「隐藏状态栏」或「游戏模式」），固定值完全失效
获取和使用它的正确姿势
必须用同步方式在页面初始化阶段读取，并立即用于样式或布局计算：
✅ 推荐写法（Vue 3 setup）：
const statusBarHeight = ref(0)
onMounted(() => {
const info = uni.getSystemInfoSync()
statusBarHeight.value = info.statusBarHeight
})
⚠️ 注意点：
- 不要在
onLoad里异步调用uni.getSystemInfo（带 callback 的旧版），容易因执行时机导致首次渲染丢失高度 - 不要在 computed 中反复调用
uni.getSystemInfoSync，它虽是同步 API，但频繁调用无意义且有轻微性能开销 - 若需全局复用，应存入
globalData或 Pinia store，且只在 App.vue 的onLaunch中初始化一次
它和导航栏高度的关系
statusBarHeight 本身只是状态栏，不包含导航栏。但它是计算完整头部高度的基础：
- 微信小程序默认导航栏总高 =
statusBarHeight+ 胶囊按钮区域高度 - 胶囊按钮区域高度 =
menuButton.height + (menuButton.top - statusBarHeight) * 2（menuButton来自uni.getMenuButtonBoundingClientRect()） - H5 端无需参与这个计算，它的“状态栏”由浏览器控制，页面视口顶部即内容起始点
真正容易被忽略的是：即使你用了 statusBarHeight，如果没给后续内容加对应占位（比如一个 fill view），页面主体仍会被自定义导航栏遮住 —— 这个占位高度必须是 statusBarHeight + titleBarHeight，缺一不可。
