响应式布局怎样处理多端适配移动端的可见高度不是一个常量。地址栏收起、键盘弹出和内嵌 WebView 都会改变它。与其把项目里的vh全量替换我更愿意先划清边界页面外壳用动态视口滚动内容交给正常文档流输入区才关注键盘遮挡。:root { --app-height: 100vh; } supports (height: 100dvh) { :root { --app-height: 100dvh; } } .app { min-height: var(--app-height); display: grid; grid-template-rows: auto 1fr auto; } .content { min-width: 0; overflow: auto; container-type: inline-size; } container (min-width: 42rem) { .card { grid-template-columns: 12rem 1fr; } }旧 WebView 的兜底不该无条件常驻。只在确实需要的页面监听visualViewport并把更新合并到下一帧const viewport window.visualViewport; if (viewport !CSS.supports(height, 100dvh)) { const update () document.documentElement.style.setProperty(--app-height, ${viewport.height}px); viewport.addEventListener(resize, update); update(); }媒体查询解决页面级布局容器查询解决组件落在哪个区域的问题。测试至少覆盖真机键盘、横竖屏和安全区模拟器能发现尺寸错误却替代不了宿主环境。 响应式布局怎样处理多端适配移动端的可见高度不是一个常量。地址栏收起、键盘弹出和内嵌 WebView 都会改变它。与其把项目里的vh全量替换我更愿意先划清边界页面外壳用动态视口滚动内容交给正常文档流输入区才关注键盘遮挡。:root { --app-height: 100vh; } supports (height: 100dvh) { :root { --app-height: 100dvh; } } .app { min-height: var(--app-height); display: grid; grid-template-rows: auto 1fr auto; } .content { min-width: 0; overflow: auto; container-type: inline-size; } container (min-width: 42rem) { .card { grid-template-columns: 12rem 1fr; } }旧 WebView 的兜底不该无条件常驻。只在确实需要的页面监听visualViewport并把更新合并到下一帧const viewport window.visualViewport; if (viewport !CSS.supports(height, 100dvh)) { const update () document.documentElement.style.setProperty(--app-height, ${viewport.height}px); viewport.addEventListener(resize, update); update(); }媒体查询解决页面级布局容器查询解决组件落在哪个区域的问题。测试至少覆盖真机键盘、横竖屏和安全区模拟器能发现尺寸错误却替代不了宿主环境。 
