uni-app怎么获取手机顶部状态栏的高度-uni-app-PHP中文网

uni.getsysteminfosync().statusbarheight 是最直接稳定的方式，返回 px 数值，ios 和主流 android 均支持；异步 api 在低端机或冷启动时延迟可达100ms+，易致导航栏闪动错位；需手动 px 转 rpx，公式为 math.round(statusbarheight / screenwidth × 750)，不可用 uni.upx2px；fallback 推荐 25rpx；横屏等动态场景需监听 resize 重新计算。

uni-app怎么获取手机顶部状态栏的高度

uni.getSystemInfoSync().statusBarHeight 是最直接、最稳定的方式，返回单位为 px 的数值，iOS 和主流 Android 机型基本都支持。

为什么不用异步 API？

异步调用 uni.getSystemInfo 在某些低端 Android 机或冷启动场景下可能延迟触发，导致自定义导航栏初次渲染时高度为 0；而 uni.getSystemInfoSync 是同步执行，只要在 onLoad 或 setup 中调用就能立刻拿到值，避免闪动或错位。

真机测试中，uni.getSystemInfo 在部分 OPPO、vivo 旧机型上回调延迟达 100ms+，足以造成视觉抖动
uni.getWindowInfo() 虽然也返回 statusBarHeight，但它在 H5 端不兼容，且某些小程序平台（如抖音）尚未完全支持
不要依赖 CSS 变量 --status-bar-height：仅 APP-PLUS 环境可用，微信/支付宝/头条小程序均不识别

px 转 rpx 的坑必须手动处理

uni-app 的 statusBarHeight 值是 px 单位，但页面样式多用 rpx。直接写 height: statusBarHeight + 'rpx' 会出错——因为 statusBarHeight 是数字，不是字符串，且没做单位换算。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

正确换算公式：const rpx = Math.round(statusBarHeight / screenWidth * 750)，其中 screenWidth 来自同一 getSystemInfoSync() 结果
别用 uni.upx2px()：它内部按 750 设计稿基准换算，但 statusBarHeight 是物理像素值，和设计稿无关，强行用会导致 iOS 上偏高 2–3rpx

示例：

const info = uni.getSystemInfoSync()
const statusBarPx = info.statusBarHeight
const statusBarRpx = Math.round(statusBarPx / info.screenWidth * 750)

极端情况要 fallback

个别定制 ROM（如华为鸿蒙早期版本、部分车机系统）可能返回 statusBarHeight: 0 或 undefined，这时硬编码 fallback 值比留空更安全。

推荐 fallback 值：iOS 默认 44px → 换算约 44rpx；Android 多数 24–28px → 换算约 24–28rpx；取中间值 25 rpx 较稳妥

封装建议：

export const getStatusBarRpx = () => {
  const info = uni.getSystemInfoSync()
  const px = info.statusBarHeight || 25
  return Math.round(px / info.screenWidth * 750)
}