混合应用中html容器适配的核心是让webview内html容器稳定响应宿主环境变化，需通过viewport配置、原生桥接、visualviewport监听及contain属性隔离等综合手段实现，而非简单填满屏幕。
混合应用（Hybrid App）里 HTML 容器的适配，核心不是“让页面填满屏幕”，而是让 Webview 内的 HTML 容器能稳定响应宿主环境变化——比如软键盘弹出、折叠屏展开、状态栏高度变更。直接套用 PC 或纯 H5 的响应式方案，90% 的情况会失效。
WebView 容器尺寸被系统 UI 挤占时怎么办
Android/iOS 的 WebView 默认不感知状态栏、导航栏、软键盘等系统 UI 占位，document.documentElement.clientHeight 常常比实际可视区域大，导致布局错位或滚动异常。
- 必须用
viewport配合原生桥接：在<meta name="viewport">中禁用用户缩放，并启用viewport-fit=cover（iOS）或通过 JS 监听visualViewport变化（Chrome 61+） - 软键盘弹出时，Android WebView 会触发
resize事件但不更新innerHeight，需监听android.webkit.WebView的onSizeChanged并透传高度给 JS - iOS WKWebView 下，
visualViewport.height才是真实可用高度；window.innerHeight仍包含被遮挡区域，不能直接用于计算
容器查询（@container）在 Hybrid 中是否可用
可用，但受限于 WebView 内核版本。Chrome 105+/Safari 16+/Firefox 110+ 原生支持，但 Android 系统 WebView 版本滞后严重（尤其旧机型），不能默认开启。
- 检查运行时支持：
CSS.supports('container-type', 'inline-size')，返回false时需回退到@media+ JS 动态 class 切换 - 命名容器（
container: card / inline-size）比匿名容器更可靠：匿名容器在某些 WebView 中会被忽略，命名后可通过@container card (min-width: 320px)显式匹配 - 不要对
body或html设container：它们不是“有明确尺寸限制的元素”，无法成为有效容器上下文
折叠屏/多窗口模式下 HTML 容器尺寸突变的处理
折叠屏展开、分屏、画中画等场景会瞬间改变容器尺寸，CSS 动画和 JS resize 监听都可能错过关键帧，导致布局闪动或错位。
- 优先用 CSS
contain: layout style size隔离组件渲染边界，避免全页重排；contain: strict在支持环境下可显著提升切换性能 - 监听
screen.orientation和window.matchMedia('(display-mode: standalone)')组合判断设备形态，而非只依赖resize - 折叠屏的 hinge 区域（如 Galaxy Z Fold）需用
@media (horizontal-viewport-segment: 2)或env(safe-area-inset-left)避开，但注意 Safari 对env()支持有限，需降级为padding-left: env(safe-area-inset-left, 0)
真正难的不是写对一行 @container，而是确认当前 WebView 是否把 container 当成一个“可测量的尺寸上下文”——它既取决于内核版本，也取决于父容器是否被原生层设置了 flex-basis 或 width。没做桥接验证就写容器查询，和没写一样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
