uni-app小程序中statusBarHeight不准，因其仅返回系统状态栏高度（如iOS 20–44px），而微信custom导航栏预留空间还包含阴影、内边距及安全区下边界；真机常因刘海屏导致实际占用达88px+，应优先使用onLoad后获取的env.safeArea.top，fallback至statusBarHeight。
uni-app小程序里statusBarHeight不准，为什么？
因为 uni.getSystemInfoSync().statusBarHeight 返回的只是系统状态栏本身的高度（iOS 通常 20–44px，安卓多为 24–30px），但微信小程序在 "navigationStyle": "custom" 下预留的顶部空间 ≠ 状态栏高度 —— 它还包含导航栏容器的内边距、阴影、分割线，甚至安全区下边界。真机上常见“内容被遮住几像素”，根源就在这儿。
更麻烦的是，刘海屏/iPhone 15+/部分安卓全面屏机型会把 statusBarHeight 报低（比如报 44，实际占用 88+），而 env.safeArea.top 才是微信注入的真实可用顶部安全距离。
- 必须等
onLoad生命周期之后再读取env，created或mounted阶段env还没注入，会是undefined - H5 端没有
env，要用CSS env(safe-area-inset-top)回退 - 支付宝/ QQ 小程序也支持
env.safeArea，但旧版本需 fallback 到statusBarHeight
怎么用env.safeArea.top动态设置导航栏高度
核心逻辑：用 env.safeArea.top 作为自定义导航栏的 padding-top 或容器高度基准，它代表从屏幕顶部到安全内容区起始位置的距离，天然兼容刘海屏和折叠屏。
实操时注意三点：
- 只在小程序平台生效，H5 和 App 端要条件编译隔离，否则会报错
- 不能直接在 data 中初始化，得在
onLoad后通过uni.getEnv()拿，或监听uni.onWindowResize（折叠屏展开时可能变化） - 如果
env.safeArea读不到，立刻 fallback 到uni.getSystemInfoSync().statusBarHeight，别空着
示例片段：
onLoad() {
const env = uni.getEnv && uni.getEnv();
if (env?.safeArea?.top) {
this.navigationBarTop = env.safeArea.top;
} else {
const sys = uni.getSystemInfoSync();
this.navigationBarTop = sys.statusBarHeight || 25;
}
}胶囊按钮位置怎么参与导航栏高度计算
仅靠 env.safeArea.top 能解决“顶部不遮挡”，但若你要像素级对齐胶囊按钮（比如让标题居中、右侧按钮贴胶囊右边缘），就必须用 uni.getMenuButtonBoundingClientRect()。
关键点在于：top 是胶囊上边距到屏幕顶部的距离，statusBarHeight 是状态栏高度，二者差值就是胶囊与状态栏之间的空白（常称“高度差”）。导航栏总高 ≈ menu.top + menu.height / 2（这是微信官方推荐公式）。
-
menu.top和menu.height都是 px 单位，无需转 rpx - 该 API 在部分低端安卓机或模拟器中可能返回空对象，务必加 try/catch 或默认值
- 不要用
menu.bottom - menu.top算高度——它含上下留白，不等于视觉高度
App.vue 全局设置时最容易忽略的细节
很多人在 App.vue 的 globalData 里存 statusBarHeight，但忘了它只在 onLaunch 时取一次，而折叠屏设备旋转后 env.safeArea 可能变，globalData 不会自动更新。
真正稳妥的做法是：
- 页面级变量优先，比如每个需要自定义导航栏的页面自己在
onLoad拿env.safeArea.top - 如果必须全局共享，用
uni.$on('safeAreaChange')主动监听变化（需自行 emit） -
uni-page-body的 CSS 高度设为 100% 仅解决“铺满”，不解决“顶部偏移”，这两件事不能混为一谈
最常被跳过的一步：没给自定义导航栏容器加 position: relative，导致胶囊按钮绝对定位时参照错乱 —— 这个细节在 iPhone 14 Pro 上几乎必现。
