应优先使用 uni.getwindowinfo() 获取 statusbarheight，因其在各端更贴近实际渲染；需在 onload 后调用，结合 uni.getmenubuttonboundingclientrect() 计算标题栏高度，并避免直接依赖 css 变量 --status-bar-height。
直接用 uni.getSystemInfoSync().statusBarHeight 获取，但必须注意：这个值在不同平台、不同端表现不一致，不能无脑信任。
为什么 uni.getSystemInfoSync().statusBarHeight 有时不准
这个 API 返回的是系统报告的原始像素值，但它在各端含义不同：
- iOS：基本准确（20–44px，取决于刘海/机型）
- Android：多数厂商返回的是“状态栏 + 虚拟导航栏”高度，或干脆硬编码为 24/25px，和实际渲染区域不符
- 微信小程序：固定返回 25px（无论是否刘海屏），但真实渲染时顶部留白可能更大
- 抖音/头条小程序：
uni.getMenuButtonBoundingClientRect()可用，但statusBarHeight不可靠，需结合胶囊位置反推 - App 端（iOS/Android）：
statusBarHeight是原生状态栏高度，但页面内容是否从其下方开始，还受navigationStyle影响
更稳妥的获取方式：优先用 uni.getWindowInfo()
uni.getWindowInfo() 是异步 API，但返回结果更贴近实际渲染上下文。它在多数平台（包括微信、支付宝、抖音、App）中能正确反映当前窗口顶部到内容区起始点的距离：
- 返回对象中的
statusBarHeight字段，在小程序端通常比getSystemInfoSync更接近视觉真实值 - 必须在
onLoad或之后调用，不能在data初始化时直接用（会是 undefined） - 示例写法：
onLoad() {
uni.getWindowInfo({
success: (res) => {
this.statusBarHeight = res.statusBarHeight;
// 后续可触发视图更新或计算导航栏总高
}
});
}
注意：不要在 created 或 beforeCreate 中调用，此时环境未就绪，success 不会触发。
需要自定义导航栏时，别只看状态栏——得算“标题栏高度”
单纯知道 statusBarHeight 不够，因为微信/抖音等小程序的“标题栏”（含胶囊按钮）是独立区域，其高度需通过胶囊位置反推：
- 调用
uni.getMenuButtonBoundingClientRect()（仅小程序端可用） - 公式：标题栏高度 =
height + (top - statusBarHeight) * 2 - 关键点：
top是胶囊上边缘距屏幕顶部距离，statusBarHeight是状态栏下边界，两者差值就是胶囊上边距状态栏下边的距离；乘以 2 是因胶囊在标题栏中垂直居中 - 如果
getMenuButtonBoundingClientRect返回空对象或报错（如某些低端安卓 WebView），应 fallback 到保守值（如 44px 或 88rpx）
CSS 里用 var(--status-bar-height) 的坑
这个 CSS 变量在部分平台（如 App、H5）中由 uni-app 运行时注入，但在小程序端支持有限：
- 微信小程序：不支持该变量，写
height: calc(var(--status-bar-height))会无效 - 抖音小程序：支持，但值固定为 25px，无法响应刘海屏
- 真正可靠的写法是：JS 获取后动态设内联样式，或通过全局 mixin 注入 CSS 变量（需配合条件编译）
- 例如在页面根元素加：
:style="{ paddingTop: statusBarHeight + 'px' }"，而不是依赖 CSS 变量
最易被忽略的一点：状态栏高度单位是 px，而你的布局若用 rpx，必须手动换算（statusBarHeight / screenWidth * 750），否则在不同屏幕宽度下会错位。
