移动端虚拟键盘弹出导致布局变形的最优解是分层策略：优先用100dvh+Flex重构根容器，辅以env(safe-area-inset-bottom)预留安全区，关键场景用VisualViewport API精准感知键盘状态。
移动端虚拟键盘弹出时，页面布局变形是高频、高影响的兼容性问题。核心矛盾在于：键盘侵占可视区域，但浏览器对高度单位（如 vh）、固定定位（position: fixed）和滚动逻辑的响应不一致，尤其在 iOS Safari 和部分安卓 WebView 中表现最明显。解决的关键不是“堵住所有漏洞”，而是建立一套分层可靠的适配策略——CSS 为主、JS 为辅、降级兜底。
优先用 100dvh + Flex 布局重构根容器
这是目前最轻量、最稳定的 CSS 层面解法，适用于绝大多数现代浏览器（Safari 16.4+、Chrome 105+、Edge 79+）：
- 将
height: 100vh或min-height: 100vh全部替换为min-height: 100dvh; max-height: 100dvh，并确保父容器设display: flex; flex-direction: column - 主内容区加
flex: 1; overflow-y: auto，让其自动撑满剩余空间且独立滚动 - 底部固定元素（如发送按钮、提交栏）必须设
flex-shrink: 0，防止被 flex 压缩变形 - 删掉
<meta name="viewport" content="..., height=device-height">——这个参数会让 dvh 失效
用 env(safe-area-inset-bottom) 预留键盘安全区
它不是键盘高度本身，但在键盘弹出时会动态增大（iOS 16+ / Chrome 106+ 支持良好），比硬写 calc(100vh - 400px) 更健壮：
- 对需要贴底但不能被遮挡的区域（如输入框上方的聊天列表、底部操作栏），用
padding-bottom: env(safe-area-inset-bottom) - 务必加降级：
padding-bottom: max(env(safe-area-inset-bottom), 20px)，避免老版本 Safari 忽略整条规则 - 注意：该值在无键盘/无刘海时为 0，天然适配“键盘感知”场景，无需 JS 判断
用 VisualViewport API 精准感知键盘状态
当必须动态调整 fixed 元素（如悬浮按钮、自定义键盘面板）时，visualViewport 是目前 iOS 和多数安卓浏览器中唯一可靠方案：
- 监听
visualViewport.addEventListener('resize', ...)，不要监听window.resize（iOS 下基本不触发） - 记录初始基准高度：
setTimeout(() => baselineHeight = visualViewport.height, 300)，避开地址栏影响 - 计算差值：
const delta = baselineHeight - visualViewport.height；delta > 150视为键盘弹出，delta 视为收起（容差防抖） - 调整 fixed 元素时，优先用
transform: translateY()，避免触发重排或与原生滚动冲突
用 focus/blur 事件做 JS 层兜底控制
输入框聚焦是最稳定、最准时的键盘弹出信号，比 resize、scroll 更可控：
- 给所有
input、textarea统一绑定focusin（冒泡更可靠），添加keyboard-open类到body - CSS 中写：
.keyboard-open .full-height { height: 100dvh; }，统一控制根容器高度策略 -
blur后用setTimeout(..., 100)移除 class，避开 iOS 键盘收起动画延迟 - 避免对每个输入框单独处理样式，减少 DOM 操作和重排开销
