<p>应使用 uni.getMenuButtonBoundingClientRect() 计算导航栏高度，因 statusBarHeight 固定无法适配动态胶囊按钮位置；正确公式为 (menuButton.top - statusBarHeight) * 2 + menuButton.height，并需 fixed 定位与两层结构布局确保对齐。</p>
直接用 uni.getMenuButtonBoundingClientRect() 算高度，别信 statusBarHeight 单独撑开就能对齐——刘海屏下胶囊按钮位置才是真实导航栏顶部基准。
为什么不能只靠 statusBarHeight？
很多开发者以为把 statusBarHeight 加到自定义导航栏顶部就万事大吉，结果在 iPhone 14 Pro、华为 Mate 50 等机型上，标题文字被胶囊按钮“咬掉一半”。这是因为：状态栏高度只是系统顶部黑条区域，而微信小程序的自定义导航栏视觉上必须和胶囊按钮上下对齐，否则会露出白边或错位。
关键点在于：statusBarHeight 是固定值（如 44px），但胶囊按钮的 top 值随刘海尺寸动态变化（iPhone 14 Pro 是 49px，部分安卓是 32px），仅靠状态栏无法还原真实布局锚点。
正确计算 navBarHeight 的公式
必须结合胶囊按钮位置和系统状态栏，用原生逻辑复现微信渲染规则：
-
menuButton = uni.getMenuButtonBoundingClientRect()—— 小程序专属 API，返回胶囊左上角坐标、宽高 -
systemInfo = uni.getSystemInfoSync()—— 获取statusBarHeight - 导航栏总高度 =
(menuButton.top - systemInfo.statusBarHeight) * 2 + menuButton.height
这个公式本质是：胶囊上边距（状态栏下到胶囊顶） + 胶囊本身高度 + 胶囊下边距（等于上边距），构成完整标题栏视觉区块。示例：
const menuButton = uni.getMenuButtonBoundingClientRect() const sys = uni.getSystemInfoSync() const navHeight = (menuButton.top - sys.statusBarHeight) * 2 + menuButton.height // iPhone 14 Pro 实测：menuButton.top=49, statusBarHeight=49 → navHeight=49px // 普通安卓：menuButton.top=32, statusBarHeight=24 → navHeight=40px
样式层必须用 fixed + 动态 top，不能写死 env()
即使算对了高度，样式写法错误照样偏移。常见翻车点：
- 用
position: absolute而非fixed→ 页面滚动时导航栏跟着动 - 写
top: env(safe-area-inset-top)→ 这个值只反映刘海高度，不是导航栏顶部位置，会导致内容被胶囊遮挡 - 拼字符串如
top: ${navHeight}px但没加单位 → 浏览器忽略该声明 - 在
<view class="navbar">上直接设height，却不给上方留出statusBarHeight占位 → 内容从屏幕顶开始，被状态栏盖住
正确做法是两层结构：<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view> 占位，再用 fixed 导航栏设 top: statusBarHeight + 'px'。
跨端兼容要防 fallback 失效
Android 和 H5 环境没有 getMenuButtonBoundingClientRect()，调用会报错或返回 null。不能简单 try/catch 后写死 44px —— 部分 Android 全面屏状态栏是 30+px，硬编码会导致底部露白。
建议 fallback 逻辑：
- 先判断平台：
uni.getSystemInfoSync().platform === 'ios'或process.env.UNI_PLATFORM === 'mp-weixin' - 只在微信小程序环境调用
getMenuButtonBoundingClientRect() - 其他平台统一用
statusBarHeight + 44（44 是胶囊最小高度，iOS 实测最低 44px，Android 多为 48–64px，留有余量） - 所有数值单位必须是
px，不要混用rpx——getMenuButtonBoundingClientRect()返回的是物理像素，rpx 会二次缩放导致错位
最易被忽略的一点：getMenuButtonBoundingClientRect() 在某些低版本基础库（menuButton && menuButton.top 判断，否则 NaN 会污染整个 height 计算链。
