直接用 statusBarHeight 计算导航栏高度会错位，因其仅含状态栏高度，而微信小程序导航栏实际包含状态栏、上下空白及胶囊按钮四部分；应使用 getMenuButtonBoundingClientRect() 在 onLoad 后获取 top 和 bottom，结合 statusBarHeight 计算 navBarHeight = menu.bottom + menu.top - system.statusBarHeight，并优先采用 env.safeArea.top 作为安全区顶部偏移。
为什么直接用 statusBarHeight 算导航栏高度会错位
因为 statusBarHeight 只返回状态栏本身高度（iOS 通常 44px，安卓多为 24px），而微信小程序的「导航栏区域」实际包含：状态栏 + 上方空白 + 胶囊按钮自身高度 + 下方空白。这四段加起来才是内容需要避开的总高度。硬写 padding-top: calc(var(--status-bar-height) + 44px) 在 iPhone 14 Pro、华为 Mate 60 或部分安卓刘海屏上必然偏高或偏低——尤其是当系统启用了深色模式或动态字体时，胶囊上下空隙并不对称。
getMenuButtonBoundingClientRect() 返回值怎么安全取用
这个 API 是唯一可信来源，但必须注意调用时机和平台限制：
- 不能在
created或mounted阶段调用，SSR 或 H5 环境下会返回null；必须等页面onLoad生命周期触发后执行 - 返回对象如
{top: 24, bottom: 56, left: 230, right: 317, width: 87, height: 32}，所有坐标均以屏幕左上角为原点，单位 px -
top是胶囊上边距屏幕顶部距离，bottom是下边距屏幕顶部距离，二者差值就是胶囊自身高度（bottom - top === height） - 安卓部分机型（如 OPPO Reno 系列）可能因系统 UI 覆盖导致
top值异常，需搭配env.safeArea.topfallback 校验
正确计算自定义导航栏总高度的公式
别再套用 “状态栏 + 44px” 或 “(top - statusBarHeight) * 2 + height”。真实且跨机型稳定的公式只有一个：
const system = uni.getSystemInfoSync() const menu = wx.getMenuButtonBoundingClientRect() const navBarHeight = menu.bottom + menu.top - system.statusBarHeight
这个结果代表：从状态栏顶部到胶囊底部的垂直跨度，它天然包含了状态栏、胶囊上下空隙和胶囊自身高度。实测在 iOS 15+、Android 13、微信 8.0.50+ 下全部吻合。若你发现计算值偏小，大概率是没等 onLoad 就读了 menu；若偏大，检查是否重复叠加了 statusBarHeight。
刘海屏和安全区必须用 env.safeArea.top
在微信/支付宝小程序中，env.safeArea 是比 statusBarHeight 更底层、更准确的安全边界。它由容器注入，反映真实可绘制区域顶部偏移：
- 必须在
onLoad后访问，例如：uni.getEnv()或直接读uni.$env?.safeArea?.top - 优先使用
env.safeArea.top，fallback 到system.statusBarHeight（仅限非小程序平台） - H5 端请用 CSS
env(safe-area-inset-top)，不要 JS 计算 - 注意：某些低端安卓机不支持
env，此时应降级为system.statusBarHeight + 20（经验值，非精确）
最易被忽略的一点：即使你已经用对了 navBarHeight，如果内容区域没有加上 padding-top: var(--status-bar-height) 或对应内边距，文字仍会被状态栏裁切——这个变量是 uni-app 编译器自动注入的，不是靠 JS 计算出来的，别试图用 JS 覆盖它。
