仅靠 resize 无法可靠解决软键盘压缩布局问题，必须结合 focusin/blur；ios safari 将软键盘视为覆盖层不触发 resize，android 部分 webview 存在缩放或延迟；focusin 是最确定的弹出信号，需立即记录 baseheight 并统一绑定所有输入元素，resize 仅作收起兜底。
仅靠 window.addEventListener('resize') 无法可靠解决软键盘压缩布局问题，尤其在 iOS 上它大概率不触发弹出瞬间——必须搭配 focusin/blur 才能覆盖全链路。
为什么 resize 在软键盘弹出时经常失效
iOS Safari（15.4+）把软键盘视为“覆盖层”，不改变 layout viewport 尺寸，因此不触发 resize；Android Chrome 虽较稳定，但部分厂商 WebView 会缩放页面或延迟触发。单纯监听 resize 会导致输入框刚聚焦就被顶出可视区，用户甚至没机会输字。
- 测试方法：在 iOS 真机上打开控制台，手动触发
input.focus()，观察console.log('resize')是否打印——多数情况下无输出 - 典型现象：
document.documentElement.clientHeight在键盘弹出后仍保持原值，但实际可视区域已变小 - 别指望
visualViewport.resize替代：它在 iOS 16.4+ 才支持，且只在键盘收起时才稳定触发
focusin + resize 组合监听才是可行起点
聚焦是键盘即将弹出的最确定信号，focusin 必须作为主入口，resize 仅作兜底收起场景。两者需独立处理、状态隔离，不能混用同一回调。
- 在
focusin回调中立即记录当前window.innerHeight，记为baseHeight；不要等setTimeout或requestAnimationFrame，否则可能错过初始高度 - 给所有
<input>、<textarea></textarea>统一绑定，避免漏掉动态插入的元素 -
resize仅用于键盘收起后恢复：加debounce(300)防抖，避免连续抖动；检查window.innerHeight > baseHeight * 0.95再执行恢复逻辑，防止误判 - 恢复操作不是简单设回
height: 100vh，而是清除 JS 设置的style.height，让 CSS 自然回退
动态修改容器高度的实操陷阱
直接用 element.style.height = window.innerHeight + 'px' 看似简单，但在多层 flex 嵌套或 overflow: hidden 容器里极易引发滚动错乱或内容截断。
- 优先改
body或根容器（如#app）的min-height，而非height：避免强制撑满导致内部 flex 子项无法收缩 - 若用
100dvh，必须降级：iOS 16.4+/Chrome 109+ 支持，老版本 Safari 会忽略整条规则，需配合min-height: 100vh和 JS 动态 fallback - 慎用
document.body.scrollTop = 0：iOS 下无效，应统一用window.scrollTo({ top: 0, behavior: 'instant' }) - 当输入框在
transform容器内时，getBoundingClientRect()返回坐标不可信，此时不要依赖它计算滚动偏移
fixed 元素被顶起时的临时切换策略
底部输入框或提交按钮若用了 position: fixed，键盘弹出后定位基准失真，最稳方案是聚焦时切为 absolute，并手动锚定到底部。
- 切换前先确认
document.activeElement === inputEl，避免 blur 后焦点转移导致误操作 - 用
setTimeout(() => { inputEl.getBoundingClientRect() }, 0)确保 DOM 渲染完成再读取位置 - 计算
bottom值：取window.innerHeight - inputEl.getBoundingClientRect().bottom - 8（减去 8px 防贴边） -
blur后必须恢复position: fixed，且延时 300ms，否则键盘收起动画未完成就切回，按钮会闪一下
真正麻烦的从来不是监听事件本身，而是状态同步：多个输入框共存时焦点切换、页面含 transform 或 overflow: hidden、滚动容器内嵌输入框——这些都会让坐标计算和高度判断失效。动手前先用 document.activeElement 和 window.innerHeight 打印日志，比盲目套方案更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
