移动端H5与原生交互时视口高度对齐的核心难点是vh等值在WebView中不稳定，需原生主动注入真实可用高度并用CSS变量+JS动态绑定替代100vh，同时监听软键盘/状态栏变化做兜底处理。
移动端 H5 容器与原生 App 交互时，视口高度对齐的核心难点在于：H5 页面的 vh、window.innerHeight 等值在 WebView 中不稳定，尤其在 iOS WKWebView 和部分安卓 WebView 中，地址栏收起/软键盘弹出/状态栏变化都会导致视口高度动态重算，而原生容器（如 iOS 的 WKWebView 或安卓的 WebView）通常以固定或可控的高度渲染 H5 容器区域。若 H5 盲目依赖 100vh 或未同步原生传入的高度，就会出现内容截断、底部留白、滚动异常或 fixed 元素错位等问题。
明确原生容器提供的真实可用高度
原生端应主动向 H5 注入稳定的高度信息，而非让 H5 自行探测。常见方式包括：
- 通过 JSBridge 向全局挂载变量，例如
window.__NATIVE_VIEW_HEIGHT = 680（单位 px），该值由原生根据当前 WebView 可视区域实时计算并更新 - 在页面初始化时，原生调用
evaluateJavaScript执行一段设置根元素样式或触发自定义事件的脚本 - 使用 URL query 参数传递初始高度（仅适用于首次加载，不支持动态变化）
禁用不可靠的视口单位，改用 CSS 自定义属性 + JS 动态绑定
避免直接使用 100vh 布局全屏容器。推荐方案：
- HTML 根元素设置
style="--app-height: 100px"占位，后续由 JS 覆盖 - CSS 中统一用
height: var(--app-height)或min-height: calc(var(--app-height) - 80px)控制关键区域 - JS 监听原生通知（如 postMessage 或自定义事件），拿到最新高度后执行：
document.documentElement.style.setProperty('--app-height', `${height}px`)
处理软键盘与状态栏变化带来的高度波动
原生层需感知这些系统行为，并及时同步新高度。H5 层可做兜底：
- 监听
window.visualViewport?.onresize（iOS 16.4+ / Chrome 61+ 支持），获取visualViewport.height作为临时参考 - 对输入框
focus/blur事件添加延迟回调（如setTimeout(() => { updateHeight() }, 100)），避开软键盘动画中间态 - 禁止
body滚动（overflow: hidden）并用局部滚动容器替代，防止因视口收缩引发 body 尺寸抖动
uni-app 或 Taro 等跨端框架中的实践建议
这类框架默认可能启用 vh 适配或 rpx 编译，容易加剧对齐问题：
- uni-app 中关闭
"h5": { "useWebviewJsBridge": false, "enablePullDownRefresh": false }并在vue.config.js中禁用viewport相关自动注入 - Taro 中配置
designWidth: 750, deviceRatio: { '750': 1 }仅用于宽度换算，高度一律交由原生控制 - 所有涉及“全高”布局的组件（如底部 Tab、侧边栏、模态框遮罩）必须基于
--app-height计算，而非100vh或100dvh
