CSS处理移动端软键盘弹出遮挡输入框_利用resize与定位属性

软键盘弹出导致输入框被顶出可视区，本质是viewport高度压缩与滚动锚点错乱，需监听focusin+resize并结合scrollIntoView或动态fixed定位解决。

软键盘弹出会把输入框顶出可视区，不是 position: fixed 失效，而是 viewport 高度被压缩、滚动锚点错乱导致的——得靠监听视口变化 + 主动调整定位逻辑来解决。

为什么 window.addEventListener('resize') 在 iOS 上经常不触发

iOS Safari（尤其是 15.4+）在软键盘弹出/收起时，resize 事件可能完全不触发，或只在收起时触发一次。这不是 bug，是 WebKit 对“非真实视口重绘”的优化策略：键盘只是覆盖层，不改变 layout viewport 尺寸。

• 仅依赖 resize 会漏掉弹出瞬间，导致输入框被遮挡
• Android Chrome 触发较可靠，但行为也不统一（比如某些厂商浏览器会缩放页面）
• 更稳的方式是组合监听：focusin（聚焦即大概率要弹键盘） + resize（兜底收起场景）

scrollIntoView 和 scrollTop 哪个更适合输入框上推

用 scrollIntoView 更直接，但默认行为在部分 Android 机型上会滚动过头；scrollTop 控制精细，但需手动计算偏移量。

• element.scrollIntoView({ block: 'nearest', inline: 'start' }) 是最小侵入方案，避免强制滚动到顶部
• 若要精准控制，优先用 element.getBoundingClientRect().top 判断是否在视口内，再决定是否调用 scrollIntoView
• 慎用 document.body.scrollTop = 0：iOS 下可能无效，应改用 document.documentElement.scrollTop 或 window.scrollTo()

如何用 position: fixed 配合动态 top 值防遮挡

对输入框父容器设 position: fixed，再根据键盘高度实时更新 top，能绕过滚动计算，但必须配合 viewport 元标签和防抖。

立即学习“前端免费学习笔记（深入）”；

• 确保 <meta name="viewport" content="height=device-height, initial-scale=1">，否则 vh 单位在键盘弹出时会失真
• 监听 focusin 后，用 window.innerHeight 与初始 screen.height 差值估算键盘高度（iOS 约 200–300px，Android 约 300–400px）
• 设置 top: calc(100vh - [键盘高度]px)，并加 transition: top 0.2s ease 避免突兀跳变
• 务必在 blur 时恢复 top: auto，否则键盘收起后留白

最麻烦的其实是状态同步：键盘弹出时机、输入框是否在滚动容器内、页面是否用了 transform 或 overflow: hidden —— 这些都会让 getBoundingClientRect 返回错误坐标。建议先用 document.activeElement === inputEl 确认焦点归属，再做任何滚动或定位操作。