软键盘弹出时 input 被遮挡的最优解是在每个 input/textarea 的 focus 事件中调用 scrollintoview({ block: 'nearest', inline: 'nearest' })，并确保 viewport meta 含 height=device-height 且 user-scalable=yes，blur 时防抖恢复滚动位置。
软键盘弹出时 input 被遮挡，不是 CSS 写错了，而是浏览器在焦点获取和视口重绘之间存在不可忽视的时机差——focus 事件里调 scrollIntoView({ block: 'nearest', inline: 'nearest' }) 是当前最轻量、最稳的解法。
focus 事件中调用 scrollIntoView 才真正生效
iOS Safari 在键盘弹出前就触发 focus，此时调用 scrollIntoView 才能卡准时机；写在 click 或 resize 里，Android 部分机型还没聚焦就滚动，iOS 则可能已错过最佳时机。
- 必须绑定到每个
input和textarea元素自身的focus事件，不能委托给document或window - 避免节流或防抖——焦点事件本身是瞬时的，加延时反而失准
- 对
textarea需额外处理：scrollTop = 0预置，否则默认可滚动行为会导致滚动目标偏移 - 别用
behavior: 'smooth'——微信 X5 内核会静默失败，光标不动
示例：
input.addEventListener('focus', () => {
input.scrollIntoView({ block: 'nearest', inline: 'nearest' });
});
viewport meta 配置错误会让所有 JS 失效
90% 的“滚动没反应”实际是 <meta name="viewport"> 锁死了浏览器对键盘弹出的感知能力。iOS Safari 依赖 visualViewport.height 变化来通知 JS，而这个变化被 user-scalable=no 或缺失 height=device-height 直接屏蔽。
-
height=device-height必须存在——否则window.innerHeight在键盘弹出后不变，JS 无法判断是否被压缩 -
user-scalable=no绝对禁用——iOS 会静默禁用 viewport 动态重绘，visualViewport.height永远等于屏幕物理高度 -
maximum-scale=1可保留，但不能搭配user-scalable=no——单独限制缩放不干扰键盘逻辑
推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes, height=device-height">
blur 时不恢复滚动，页面就悬在半空
focus 时滚上去了，blur 时不处理，用户收起键盘后页面常卡在错误位置：底部留白、顶部内容被裁、再点其他输入框光标直接消失——这在 iOS 上尤为明显，因为系统不自动回滚。
- 监听
blur事件，用防抖（如 200ms）延迟执行恢复逻辑，避开 Safari 对连续 blur 的优化拦截 - 记录滚动位置要在
focus触发前一刻取：const lastScrollTop = window.visualViewport?.pageTop || window.pageYOffset - 不要硬滚到
0：window.scrollTo(0, lastScrollTop)更尊重用户浏览上下文 - 若页面含
position: sticky提交按钮，需在blur后同步重设其容器padding-bottom，否则留白残留
fixed 定位按钮在软键盘场景下必须替换
position: fixed 按钮在 iOS 键盘上方悬空，这不是 z-index 问题，而是 iOS 键盘触发的视口缩放与 fixed 定位锚点失配所致。
- 移除所有表单相关元素（尤其是
input、textarea）上的transform: translateZ(0)或will-change: transform——它们会破坏 iOS 的键盘滚动联动 - 改用
position: sticky+ 底部容器预留padding-bottom，更兼容键盘生命周期 - 给提交按钮父容器加
scroll-margin-top: 60px（数值按实际按钮高度微调），确保input.focus()后浏览器自动滚动到可视区 - 绝对不用
position: fixed布局按钮；若遮罩层内含输入框，focus时临时将遮罩层position改为absolute，blur后恢复fixed+bottom: 0
最常被忽略的一点：同一段代码在真机上表现可能和 DevTools 模拟器完全不同，vivo、华为、OPPO 的系统键盘对 inputmode 和 scrollIntoView 的支持波动极大，必须实测；而 user-scalable=no 在 iOS 上不是“建议禁用”，是“真·静默杀手”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
