必须优先使用 env.safeArea.top（小程序）或 CSS env(safe-area-inset-top)，因 statusBarHeight 在刘海屏、折叠屏、EMUI/MIUI 等机型上返回值与实际安全距离不符，易导致导航栏偏移。
直接结论：不能只靠 uni.getSystemInfoSync().statusBarHeight，必须优先用 env.safeArea.top（小程序）或 env(safe-area-inset-top)（CSS），否则在 iPhone 14 Pro、折叠屏、EMUI/MIUI 刘海机型上必然偏移。
为什么 statusBarHeight 在刘海屏下不可靠
它返回的是系统“声称”的状态栏高度，不是页面实际可用的顶部安全距离。真实场景中：
- iOS 15+ 动态状态栏（如录音红条）会把
safe-area-inset-top拉高到 54px，但statusBarHeight仍固守 44px - 华为 Mate 50 返回 25px，实际物理凹槽占用约 38px，差值全靠
env.safeArea.top补偿 - 小米 13 把导航栏阴影高度混进
statusBarHeight，导致自定义导航栏被顶出视口 - 微信小程序容器对
navigationStyle: "custom"的处理逻辑和原生不一致，预留区域包含胶囊按钮上下间距
小程序端必须在 onLoad 后读取 env.safeArea.top
微信/支付宝/ QQ 小程序会在页面加载完成后注入 env 对象，created 或 mounted 阶段访问是 undefined。
- 不要在 Vue 生命周期钩子中提前取值，必须等
onLoad触发后执行 - 示例写法：
onLoad() { const env = uni.getEnv ? uni.getEnv() : {}; const top = env.safeArea?.top || 0; this.navBarTop = top; } - 需搭配条件编译，H5 端走 CSS
env(safe-area-inset-top)，App 端可 fallback 到uni.getSystemInfoSync().statusBarHeight - 注意：
env.safeArea是整数像素值（如 44），单位是 px，直接用于内联样式即可
自定义导航栏高度应基于胶囊按钮动态计算
仅靠状态栏或安全区顶部值，仍无法覆盖 iOS 胶囊按钮与标题之间的空白，真实导航栏高度 = safeArea.top + 胶囊上边距 × 2 + 胶囊高度。
- 必须调用
uni.getMenuButtonBoundingClientRect()获取胶囊位置 - 关键公式：
(menuButton.top - statusBarHeight) * 2 + menuButton.height + statusBarHeight - 这个值才是 iOS 上能对齐原生导航栏底部的真实高度，安卓部分机型也可复用该逻辑
- 不要硬编码 88px / 96px，不同 iOS 版本、字体缩放、深色模式下胶囊位置会浮动
H5 端用 env(safe-area-inset-top) + 媒体查询兜底
浏览器没有状态栏概念，但 Safari 和部分安卓 WebView 支持 env() 函数；Chrome 等则需 fallback。
- CSS 中必须同时写两行：
.nav-bar { padding-top: 15px; padding-top: env(safe-area-inset-top); } - 对不支持
env()的旧浏览器，用@supports not (padding-top: env(safe-area-inset-top))加媒体查询判断刘海特征（如max-height: 736px且aspect-ratio: 19.5/9） - H5 不要依赖
uni.getSystemInfoSync()的statusBarHeight，它在浏览器里是模拟值，无物理意义
最易被忽略的一点：折叠屏（如 Z Fold5）、灵动岛机型（iPhone 14 Pro）在展开/切换形态时，env.safeArea.top 会实时变化，但 uni-app 没有对应生命周期监听。必须手动绑定 window.matchMedia 监听 screen 变化，并重算导航栏高度——否则用户折合手机瞬间，顶部内容就可能被裁掉。这不是边缘情况，而是当前主力机型的日常行为。
