必须先设置 navigationStyle: "custom"，否则后续样式无效；它在H5/App端移除导航栏DOM，在小程序端强制启用自定义导航栏；需配合清除默认内外边距、干掉伪元素、动态适配状态栏高度及正确设置背景图。
navigationStyle: "custom" 是必须第一步
不设这个，后面所有样式调整都白搭。它在 H5 和 App 端真正移除导航栏 DOM 结构，让 page 元素从 viewport 顶部开始渲染；微信小程序端会强制启用自定义导航栏——没配组件就留白，但至少不会占位。
常见错误是只改 navigationBarTitleText 或 navigationBarBackgroundColor，这些只是改文字和颜色，容器还在，padding-top: 44px 这类内联样式照常注入。
- 在
pages.json对应页面的style下加："navigationStyle": "custom" - App 端建议同步关原生导航栏：
"app-plus": { "titleNView": false } - 微信小程序必须配套写一个自定义导航栏组件，否则顶部空白不可交互
清除 page 默认 margin/padding + 干掉伪元素占位
即使启用了 navigationStyle: "custom"，uni-app 仍可能注入 page::before 伪元素占位，且浏览器默认给 body 或 page 加 margin/padding（比如 Chrome 移动端默认 8px），叠加后背景图永远“卡”在状态栏下方。
- H5 必加全局样式：
page { margin: 0; padding: 0; } - 再加：
page::before { display: none; }（精准干掉 uni-app 注入的占位伪元素） - 不要用
* { margin: 0; padding: 0; }，会影响第三方组件内部布局
H5 端需动态适配状态栏高度
iOS Safari 支持 window.statusBarHeight，安卓 WebView 不支持，也不能直接 fallback 为固定值（刘海屏/非刘海屏、Chrome vs 微信内置浏览器行为不一）。
- 简单可靠做法：用 JS 获取并设置
document.documentElement.style.paddingTop - 示例逻辑：
if (window.statusBarHeight !== undefined) { document.documentElement.style.paddingTop = window.statusBarHeight + 'px'; } else if (/Android/.test(navigator.userAgent)) { document.documentElement.style.paddingTop = '24px'; // 安卓常见状态栏高度 } else { document.documentElement.style.paddingTop = '0'; } - 注意：该 JS 需在页面
onLoad或mounted中执行，且确保 DOM 已 ready
背景图设置要避开 img 标签或 view 包裹
用 <image> 或嵌套 <view> 设置背景图，容易被父级 padding/margin 截断，或触发 flex 布局计算偏差；最稳方式是直接设在 page 或根 <view class="root"> 上。
- 推荐写法：
.root { width: 100vw; height: 100vh; background-image: url('/static/bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } - 避免用
width: 100%; height: 100%;，在某些 H5 环境下会因父级未设高而失效 - 如果要用
<image>，必须设mode="widthFix"或mode="aspectFill"，并配合position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
实际最难缠的是 H5 在 iOS Safari 下的渲染时机问题：window.statusBarHeight 可能首次取不到，或 CSS 应用顺序导致闪动。真要稳定，得结合 DOMContentLoaded + setTimeout(..., 0) 双保险触发重绘，这点容易被忽略。
