uni.getSystemInfoSync().statusBarHeight 直接返回适配后的状态栏高度,iOS全面屏稳定为44px,Android已兼容主流厂商,H5恒为0;不可用screenHeight-windowHeight推算,微信小程序中为0时可用menu.top减半法或fallback至44/48;rpx转换需用初始化时的screenWidth计算。

uni.getSystemInfoSync().statusBarHeight 就是你要的状态栏高度
直接调用 uni.getSystemInfoSync(),取返回对象的 statusBarHeight 字段,它在全面屏(含刘海、挖孔、水滴)设备上已由 uni-app 内部适配完成,无需额外判断机型或平台。
常见错误现象:有人在 data 里初始化写死 statusBarHeight: 20,结果在安卓全面屏(如华为 Mate 系列、小米折叠屏)上显示错位;还有人误以为要先调 uni.getMenuButtonBoundingClientRect() 才能算状态栏,其实那是为算导航栏服务的,和状态栏无关。
-
statusBarHeight在 iOS 全面屏(iPhone X 及以后)稳定返回真实值(通常 44px) - Android 全面屏设备差异大,但
uni.getSystemInfoSync()已兼容主流厂商(华为、小米、OPPO、vivo)的系统 API,返回的是实际渲染占用高度 - H5 端该值恒为 0(浏览器无原生状态栏),别拿它做 H5 布局依据
- 真机调试才可靠,模拟器常返回泛化值(如 25 或 0),不能用于适配验证
为什么不能用 screenHeight - windowHeight 推算状态栏高度
这个差值在全面屏设备上不等于 statusBarHeight,因为 windowHeight 已同时扣除状态栏 + 默认导航栏(甚至底部安全区),而 screenHeight 是物理屏幕总高。两者相减得到的是「导航栏 + 状态栏 + 底部指示条/虚拟按键」的总和,不是单一状态栏。
使用场景:仅当你需要粗略估算“顶部不可用区域”时可参考,但不能用于精准布局(比如自定义顶部吸顶栏、胶囊对齐等)。
- iPhone 15 Pro:screenHeight = 932,windowHeight = 786,差值 146 → 实际 statusBarHeight = 59,navigationBarHeight ≈ 87
- HUAWEI P60:screenHeight = 2700,windowHeight = 2380,差值 320 → 实际 statusBarHeight = 48,其余全是导航栏和底部安全区
- 差值 > 60 时,基本说明存在隐藏导航栏或底部安全区,此时更不该反推状态栏
微信小程序里 statusbarHeight 在某些机型上为 0 怎么办
极少数定制 ROM 或旧版基础库(statusBarHeight,这时需降级处理,但不要硬写 20 或 25 —— 要结合 getMenuButtonBoundingClientRect() 反推。
注意:该降级逻辑仅限 MP-WEIXIN,其他平台一律以 uni.getSystemInfoSync().statusBarHeight 为准。
- 先尝试同步获取:
const info = uni.getSystemInfoSync(); const h = info.statusBarHeight || 0; - 若为 0,再尝试获取胶囊按钮:
const menu = uni.getMenuButtonBoundingClientRect(); - 若 menu 存在且
menu.top > 0,则statusBarHeight = menu.top - (menu.height / 2)(经验公式,覆盖 95% 微信全面屏机型) - 仍失败则 fallback 到 44(iOS 安全值)或 48(Android 主流值),避免布局塌陷
状态栏高度单位是 px,rpx 场景下怎么用
uni-app 的 statusBarHeight 始终是 px 单位,CSS 中直接写 height: calc(var(--status-bar-height) * 1px) 不生效,必须转 rpx 才能参与响应式计算。
转换公式固定:rpxHeight = (pxHeight / screenWidth) * 750,其中 screenWidth 来自同一 uni.getSystemInfoSync() 调用。
- 别用
uni.upx2px()转换,它依赖当前屏幕宽度,而statusBarHeight是静态物理值,必须用初始化时的screenWidth - 示例:
const info = uni.getSystemInfoSync(); const rpx = (info.statusBarHeight / info.screenWidth) * 750; - 在 Vue 模板中用
:style="{ paddingTop: rpx + 'rpx' }",而非style="padding-top: {{rpx}}rpx"(后者无法响应式更新)
复杂点在于全面屏没有统一标准,不同厂商对“状态栏”的定义略有出入(比如是否包含圆角遮罩、是否计入刘海投影),statusBarHeight 是 uni-app 尽可能收敛后的可用值,不是绝对物理像素——够用,但别指望它和设计稿像素 1:1 对齐。


















