移动端输入框被软键盘遮挡的本质是视口高度突变与页面滚动逻辑不匹配；应优先用 scrollintoview({ block: 'nearest', inline: 'start' })做最小干预，配合 resize + activeelement 判断真实遮挡，并确保 viewport-fit=cover 及合理 css 设置。
移动端输入框被软键盘遮挡，本质是视口高度突变与页面滚动逻辑不匹配导致的。自动滚动修正的关键不是“强行滚动”，而是让浏览器知道“此刻哪部分必须可见”，并配合平台行为做轻量干预。
优先用 scrollIntoView 做最小干预
现代 iOS 和 Android 浏览器对 scrollIntoView 支持良好，且它能尊重系统原生滚动策略（比如 iOS 的平滑抬升）。相比手动计算 offset，它更可靠、代码更少。
- 在 input 聚焦后调用：
inputElement.scrollIntoView({ block: 'nearest', inline: 'start' }) - 加
setTimeout确保 DOM 渲染完成后再执行（尤其 Vue/React 中） - 避免使用
{ behavior: 'smooth' }，部分 Android WebView 不支持，可能卡顿或失效
监听 resize + activeElement 判断真实遮挡
软键盘弹出会触发 window.resize，但并非所有 resize 都代表键盘弹起（比如横竖屏切换）。需结合当前聚焦元素位置判断是否真被遮挡。
- 监听
resize，检查document.activeElement是否为 input/textarea - 获取该元素
getBoundingClientRect().bottom，若大于window.innerHeight，说明底部被挡 - 此时再执行
window.scrollTo(0, elementTop - 40)（减去安全间距） - 可加 UA 判断，仅在 Android 上启用此逻辑，iOS 默认行为已足够
viewport-fit=cover 是基础前提
没有这个设置，很多自动滚动策略会失效——尤其在刘海屏 + 键盘场景下，页面可能被裁切或布局错乱。
- 确保 meta 标签包含：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 不要加
user-scalable=no或过度限制缩放，否则某些 Android 键盘会拒绝压缩视口 - 搭配 CSS：给 body 设置
min-height: 100vh，防止内容过短时滚动失效
WebView 场景下建议交由原生控制
如果 H5 运行在 App 内嵌 WebView 中，JS 自行探测键盘高度误差大（尤其第三方输入法），应优先走 Native 通信通道。
- Native 层监听键盘 show/hide 事件，向 JS postMessage 传递精确高度
- 前端收到后，动态设置一个
keyboard-heightCSS 变量，用 calc() 调整输入区域 margin 或 padding - 比滚动更稳定，也避免了 focus/blur 时的闪烁或跳动
