bootstrapAppSafeArea

把 --app-safe-area-* 写到根节点；独立全屏壳可再对齐视口高度。

函数签名

const APP_VIEWPORT_HEIGHT_CSS_VAR = '--app-viewport-height'
const APP_ROOT_VIEWPORT_LOCK_CLASS = 'app-root-viewport-lock'

function bootstrapAppSafeArea(deps: BootstrapAppSafeAreaDeps): void

function bootstrapDocumentAppSafeArea(options?: {
  isCapacitorNativePlatform?: () => boolean
  pinViewportHeight?: boolean
}): void

工作原理

1. detectAppSafeAreaProfile + applyAppSafeAreaCssVars 写 safe-area 变量。
2. Android 网页（夸克 / UC 等）钉死假 env(safe-area-inset-*)，并去掉 viewport-fit=cover。
3. pinViewportHeight: true 时：该档把 --app-viewport-height 写成 visualViewport 的 px；离开该档清掉 inline，恢复 CSS 的 100dvh。
4. 订阅 resize / visualViewport.resize（同一 root 只绑一次）。

业务包用法

视口 CSS 已随 @zengchaowu/vue-ui/dist/tokens.css 引入（safe-area.css 内的 --app-viewport-height / .app-root-viewport-lock）。

import { Capacitor } from '@capacitor/core'
import {
  APP_ROOT_VIEWPORT_LOCK_CLASS,
  bootstrapDocumentAppSafeArea,
} from '@zengchaowu/shared/functions/browser/bootstrapAppSafeArea'

bootstrapDocumentAppSafeArea({
  isCapacitorNativePlatform: () => Capacitor.isNativePlatform(),
  pinViewportHeight: true,
})

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  document.documentElement.classList.add(APP_ROOT_VIEWPORT_LOCK_CLASS)
}