最稳解法是在 input/textarea 的 focus 事件中调用 scrollintoview({ block: 'nearest', inline: 'nearest' })；需配正确 viewport（含 height=device-height、user-scalable=yes）；blur 时防抖还原滚动位置；inputmode 仅提示键盘类型，不解决遮挡。
软键盘遮挡不是样式问题，而是 viewport 行为 + focus 事件时机没对齐——在 input 或 textarea 的 focus 事件中调用 scrollIntoView({ block: 'nearest', inline: 'nearest' }) 是当前最稳、最轻量的解法。
focus 事件里调 scrollIntoView 才真正有效
很多代码写在 click、resize 或 focusin 上，但时机全错。iOS Safari 在键盘弹出前就触发 focus，此时滚动能卡准；Android 部分机型在 click 后还没聚焦，滚动就失效了。
- 必须绑定到每个
input和textarea元素自身的focus事件，不能委托给document或window - 避免节流或防抖——焦点事件本身是瞬时的，加延时反而失准
- 别用
behavior: 'smooth'：微信 X5 内核静默失败，光标不动 -
textarea要额外处理：scrollTop = 0预置，否则默认可滚动会干扰scrollIntoView行为
示例：
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 时不处理，用户收起键盘后页面常卡在错误位置：底部留白、顶部内容被裁、再点其他输入框光标直接消失。
- 监听
blur事件，配合 200ms 防抖再执行一次位置还原 - 记录滚动位置不能依赖
document.body.scrollTop（iOS 常为 0），要用window.scrollY或visualViewport?.pageTop - 还原时也用
scrollTo({ top: savedY, behavior: 'auto' })，避免smooth在部分内核下异常
inputmode 不是键盘开关，只是提示
inputmode 对 contenteditable 无效，只对 input、textarea 生效；它不阻止输入、不拦截粘贴、不解决遮挡，仅在移动端触屏且配合 type="text" 时大概率生效。
- 写了
inputmode="numeric"还弹全键盘？很常见：iOS 16.4 前忽略，vivo/HMS 输入法基本不读取 -
type="number"会压制inputmode：iOS 直接忽略，Chrome 行为不稳定 - 金额类字段优先用
<input type="text" inputmode="decimal" pattern="[0-9.]*">，避开type="number"的小数点转逗号、粘贴拦截等坑 - 验证码、手机号等纯数字场景，
inputmode="numeric"是兼容性最稳的选择
真机测试比任何文档都管用，尤其要测 vivo、华为、OPPO —— 它们的系统键盘行为在不同版本间波动极大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
