uni.getSystemInfoSync().statusBarHeight 返回0或不准确是因平台能力缺失或调用时机错误：微信小程序需基础库≥2.10.4且在onShow后调用，H5中为undefined，部分Android机型也返回0；应默认fallback为0并由UI层兜底，避免硬编码，使用空值判断、动态绑定及双路降级处理。
uni.getSystemInfoSync().statusBarHeight 为什么返回 0 或不准确
这不是 bug，是平台能力缺失或调用时机错误的正常表现。很多场景下 statusBarHeight 拿不到真实值：微信小程序需基础库 ≥2.10.4，且必须在 onShow 后调用（onLoad 阶段常为空）；H5 环境中该字段恒为 undefined；部分 Android 机型也返回 0。
不能 fallback 到硬编码（比如 “iPhone 14 Pro 是 49px”），因为不同厂商、系统版本、横竖屏状态都会影响实际高度。更安全的做法是：缺失时默认为 0，并由 UI 层兜底（比如用浅色背景+顶部留白容忍偏差）。
- 始终做空值判断：
const top = systemInfo.statusBarHeight ?? 0 - 避免在
data()初始化时直接取值，改用onReady或onShow触发获取 - 若使用 Vue 3 +
setup，建议封装成computed或ref并配合onMounted+onShow双触发
var(--status-bar-height) 在 App.vue 中全局生效但 H5 不认
--status-bar-height 是 uni-app 提供的 CSS 自定义变量，仅在 App 端和微信小程序真机中被注入，H5 环境里它压根不存在——所以直接写 padding-top: var(--status-bar-height) 在浏览器里会退化为 0，导致内容顶到顶部被裁切。
正确做法是双路降级：先用 CSS 变量，再 fallback 到 JS 动态注入的内联样式，或用媒体查询隔离 H5 场景。
- App.vue 全局样式可保留：
.container { padding-top: var(--status-bar-height, 0px); } - H5 必须额外处理：在页面根节点上通过
:style="{ paddingTop: statusBarHeight + 'px' }"动态绑定 - 不要依赖
viewportmeta 的initial-scale来“模拟”状态栏高度，这会导致缩放失真和点击偏移
navigationStyle: "custom" 后顶部安全区必须手动补全
启用 navigationStyle: "custom" 会关闭原生导航栏，同时也让 manifest.json 中的 safearea.top 配置失效。此时顶部安全区完全交由前端控制，但很多人忘了这事，结果自定义标题栏直接贴顶、文字被刘海遮住。
关键点是：你得自己把 statusBarHeight 加进布局，而不是靠系统“帮你留空”。
- 如果标题栏是固定高度（比如 88rpx），推荐用
calc(var(--status-bar-height, 0px) + 88rpx)做总高 - 若用 nvue 页面，
env(safe-area-inset-top)不支持，只能靠 JS 获取statusBarHeight转 rpx 后传给style - 微信小程序中，
getMenuButtonBoundingClientRect()返回的按钮位置可用于反推标题栏高度，比硬写 44px 更可靠
动态转 rpx 时 px → rpx 换算必须用 windowWidth
很多人直接用 uni.upx2px(44) 或写死 44rpx 补顶部，但这是错的：uni-app 的 rpx 基准是设计稿宽度（通常是 750rpx 对应 windowWidth），而 statusBarHeight 是设备真实像素（px）。直接混用会导致 iPhone 14 Pro（49px）在窄屏手机上撑开、宽屏上压缩。
必须用当前设备的 windowWidth 和 screenWidth 做比例换算：
const sys = uni.getSystemInfoSync(); const rpx = Math.round((sys.statusBarHeight / sys.screenWidth) * 750);
- 别用
uni.upx2px()处理动态 px 值，它只适用于静态设计稿单位 - 在 onReady/onShow 中执行换算，避免首次渲染时
windowWidth还没就绪 - 如果用了 rem 或 vw 方案，这套逻辑要重写，不能直接套用 rpx 思路
实际最易被忽略的是：顶部安全距离不是“加个 padding 就完事”，而是要和你的导航栏高度、状态栏透出策略、是否沉浸式、是否跟随系统字体缩放全部耦合在一起。一个没对齐，整个头部就错层——尤其在 iOS 动态岛机型上，状态栏高度会随横竖屏切换突变，JS 层必须监听 resize 或 onWindowResize 做二次更新。
