小程序内嵌h5顶部被挤压是因webview未适配安全区，需设置viewport-fit=cover并用env(safe-area-inset-top)留白，安卓需js动态获取状态栏高度，uniapp还需原生层配合，避免100vh和fixed定位导致二次遮挡。
小程序内嵌 H5 时顶部被挤压，本质是 WebView 渲染区域与原生状态栏“抢空间”，H5 页面默认不知道上面有状态栏或刘海，直接从屏幕最顶开始画，结果标题、按钮被盖住。这不是缩放问题，而是安全区域未对齐。
必须加 viewport-fit=cover 并配合 env() 避让顶部
iOS（iPhone X 及以后）和部分安卓 WebView（如微信 7.0.10+）支持 viewport-fit=cover，它让视口铺满全屏，但前提是主动处理安全区。只写 viewport-fit=cover 不加避让，内容会直接顶进刘海里。
- 在
中设置：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - CSS 中用
env(safe-area-inset-top)给顶部留白：padding-top: env(safe-area-inset-top, 20px); - 若使用固定头部，推荐：
top: env(safe-area-inset-top, 20px);替代固定top: 0
Android 状态栏高度不能写死，需 JS 动态适配
安卓碎片化严重：普通状态栏约 24dp，沉浸式可能为 0，通话中又临时变高。纯 CSS 的 env() 在多数安卓 WebView 中不生效，必须靠 JS 补位。
- 通过
document.documentElement.style.setProperty('--status-bar-height', height + 'px')注入自定义变量 - 在 H5 加载后调用
uni.getSystemInfo（uniapp）或WebViewJavascriptBridge（原生桥接）获取真实状态栏高度 - CSS 中使用：
padding-top: var(--status-bar-height, 24px);
uniapp web-view 场景要额外处理原生层
uniapp 打包的 App 中，web-view 默认是全屏渲染，不自动预留状态栏。仅前端改不够，需协同原生配置：
- Android：在
AndroidManifest.xml中关闭沉浸式，或设置android:fitsSystemWindows="true" - iOS：在
Info.plist中启用UIViewControllerBasedStatusBarAppearance = YES，并由原生控制状态栏显隐 - H5 内部仍保留
env(safe-area-inset-top)作为兜底，确保 iOS 安全
避免 100vh 和固定定位引发的二次遮挡
即使顶部留白了，如果页面用了 height: 100vh 或 position: fixed; top: 0，仍可能被截断或错位。
- 替换
100vh为100dvh（更准确反映可视高度），或用calc(100vh - env(safe-area-inset-top)) - 固定头部容器不要设
top: 0，改用top: env(safe-area-inset-top)或动态 JS 设置偏移 - 测试横竖屏切换，
env(safe-area-inset-top)在横屏时可能变为env(safe-area-inset-left)
