H5 不支持 uni.setNavigationBarColor，需用 env(safe-area-inset-top) 预留顶部安全区；微信双标题栏应全局隐藏 uni-page-head；Android 状态栏高度需动态获取，不可依赖静态值或 CSS 变量。

uni.setNavigationBarColor 在 H5 调用就报错

因为 uni.setNavigationBarColor 是 App 和小程序平台专属 API，H5 端压根没实现。控制台报 undefined is not a function 不是环境判断失误，是设计如此。别在 H5 的 onLoad 或 onShow 里写它，也别加条件编译兜底——写了不仅无效，还可能干扰页面渲染流程。

H5 页面顶部内容被“顶上去”了

这不是状态栏颜色重叠，而是没预留安全区。iOS Safari 默认启用 viewport-fit=cover，但你的 CSS 没响应 env(safe-area-inset-top)，导致标题直接贴着屏幕最上方显示：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

• 确保 <meta name="viewport"> 包含 viewport-fit=cover（uni-app 默认已加）
• 给最外层容器加 padding-top: env(safe-area-inset-top)，不要写死 20px 或 44px
• 若用了自定义导航栏，它的高度应为 calc(44px + env(safe-area-inset-top))，不能只靠 top: 0 + fixed
• 禁用纯 position: fixed; top: 0 的伪导航栏，它会无视安全区，必须配合 env(safe-area-inset-top) 动态偏移

微信浏览器里出现两个标题栏

微信 X5 内核有时会无视 uni-page-head 的 display: none，同时自身又渲染一个原生标题栏，造成双头现象：

• 全局隐藏方案：在 main.js 加混入，检测到微信环境后调用 this.$nextTick(() => { document.querySelector('uni-page-head')?.style.display = 'none' })
• 更稳妥的做法是直接在 index.html 的 <head> 中注入样式：uni-page-head { display: none !important; }
• 避免在页面级组件中反复判断 UA，统一在入口处理；否则多页跳转时容易漏掉

Android 设备状态栏高度不准

uni.getSystemInfoSync().statusBarHeight 在 Android 上返回值极不可靠：横竖屏切换、分屏模式、厂商定制系统都可能导致缓存失效或返回 0：

• 真机调试时优先用原生桥接方式获取：plus.android.importClass('android.view.WindowInsets').getStableInsetTop()
• 不要依赖 --status-bar-height CSS 变量做 Android 布局，它只在 App 和小程序生效，H5 下为空
• 若必须用 JS 控制，应在 onReady 后再调一次 plus.navigator.getStatusBarHeight()，并监听 resize 事件做更新
• 小米、华为等机型开启「全屏显示」或「刘海透明化」后，statusBarHeight 可能突变，需用 setTimeout 延迟读取以避开初始化抖动

真正容易被忽略的是：H5 在 iOS 上根本无法控制状态栏颜色或文字样式，所谓“重叠”全是视觉误判；而 Android 上的状态栏高度不是静态配置项，是随系统设置、窗口模式、甚至 WebView 容器参数实时变化的运行时值。