应使用wx.getmenubuttonboundingclientrect()获取胶囊按钮bottom值并结合pixelratio计算导航栏总高，而非依赖safeareainsets.top或--status-bar-height；需在onload后动态计算并设容器height与padding-top，安卓低端机需fallback至88rpx。
uni-app 微信小程序自定义导航栏的 safeAreaInsets.top 不可靠
在微信小程序中，safeAreaInsets.top 返回的是「状态栏高度」，不是「导航栏总安全高度」。它只覆盖刘海/凹口区域，但不包含右上角胶囊按钮（menuButton）所占据的垂直空间。直接用它设置 padding-top 会导致标题文字被胶囊遮挡——尤其在 iPhone 14 Pro、15 Pro 等机型上非常明显。
真正需要计算的是胶囊底部到屏幕顶部的距离
微信小程序导航栏安全区域的上限，由胶囊按钮底边决定。必须用 wx.getMenuButtonBoundingClientRect() 获取其 bottom 值，再结合像素比还原真实高度：
const sys = uni.getSystemInfoSync()const menuBtn = wx.getMenuButtonBoundingClientRect()-
const navHeight = menuBtn.bottom + (16 / sys.pixelRatio)—— 这个16是胶囊底边预留空白（微信官方文档确认） - H5 和 App 端不能调用
wx.getMenuButtonBoundingClientRect()，必须条件编译隔离
为什么不能只靠 CSS 变量 --status-bar-height
这个变量只在小程序基础库 2.7.3+ 支持，且仅等价于 statusBarHeight，仍不包含胶囊。常见错误是这样写：
微信公众号推文写作助手
下载
微信公众号推文写作与发布助手。支持深度文章撰写（1500+ 字）、智能配图搜索、API 配置引导、草稿箱上传、一键排版等全流程功能。 每篇文章默认 1500 字以上，配备 1 张相关配图（放在第一段后），包含清晰的分段标题结构。
.navbar {
padding-top: var(--status-bar-height);
}
结果是：状态栏区域空了，但胶囊正下方那块「看不见的遮挡区」依然存在。正确做法是动态计算并注入内联样式或 CSS 自定义属性：
- 在页面
onLoad中计算navHeight，存入data或 Pinia - 模板中绑定：
:style="{ paddingTop: navHeight + 'px' }" - 避免使用
env(safe-area-inset-top)——小程序不支持该环境变量
自定义导航栏容器必须撑满整个导航区域高度
光靠 padding-top 不够。如果容器本身高度不足，内容会从胶囊下方“漏出”或被截断。必须确保外层容器高度等于你算出的 navHeight：
- 设
height: {{ navHeight }}px（不能只靠 padding 填充） - 内部状态栏占位块用
height: {{ statusBarHeight }}px（单独取sys.statusBarHeight） - 中间内容区（含标题、搜索框等）高度 =
navHeight - statusBarHeight，再用 flex 垂直居中 - 安卓部分低端机
getMenuButtonBoundingClientRect()可能返回{ top: 0 }，需 fallback 到固定值如88rpx
实际开发中最容易被忽略的一点：胶囊位置不是静态的。用户开启/关闭「深色模式」、「字体大小调节」甚至某些系统辅助功能时，menuButton 的 top 和 bottom 都可能变化。因此不要缓存首次计算结果，应在 onShow 或监听 uni.onWindowResize（小程序暂不支持，需手动触发重算）后重新获取。
