在 focus 事件中调用 scrollintoview({ block: 'nearest', inline: 'nearest' }) 并配合正确 viewport 配置（含 height=device-height、user-scalable=yes）是解决输入框被键盘遮挡的核心方案，blur 时需防抖恢复滚动位置，底部元素应改用 flex 布局替代 fixed。
直接在 focus 事件里调用 scrollIntoView({ block: 'nearest', inline: 'nearest' })，配合正确的 <meta name="viewport"> 配置，90% 场景就能稳住输入框不被遮挡——不是样式写错了，是浏览器对键盘弹出的响应机制没对上。
focus 事件里调 scrollIntoView 才有效
很多代码写在 click、touchstart 或 resize 里，但时机全错。iOS Safari 在键盘真正弹出前就触发了 focus，此时调用 scrollIntoView 反而最准；Android 部分机型在 click 后焦点还没落定，滚动就失效了。
- 必须监听
input或textarea元素自身的focus事件，不是window的focusin - 别用
{ behavior: 'smooth' }——老版微信 X5 内核不支持，会静默失败 -
{ block: 'nearest', inline: 'nearest' }是关键：只做最小必要滚动，避免把光标顶到视口顶部再被遮住 - 示例：
input.addEventListener('focus', () => { input.scrollIntoView({ block: 'nearest', inline: 'nearest' }); });
viewport meta 标签写错，JS 就白写
90% 的“滚动无效”问题，根源是 <meta name="viewport"> 锁死了浏览器对键盘弹出的响应能力。iOS 会因此忽略 visualViewport.height 变化，JS 根本感知不到键盘已起。
- 必须包含
height=device-height：否则 iOS Safari 的window.innerHeight在键盘弹出后不变，无法判断遮挡 - 绝对禁用
user-scalable=no：它会让 iOS 静默禁用 viewport 重绘，visualViewport.height永远等于屏幕物理高度 - 推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes, height=device-height">
- Android Chrome 对
height=device-height支持弱，但至少不会让情况更糟；user-scalable=no在 iOS 上才是真·静默杀手
blur 时不恢复滚动位置，页面就悬在半空
focus 时滚上去了，blur 时不处理，用户再点别的输入框，光标可能直接消失——尤其 iOS 收起键盘后页面不自动回滚，留白+错位是常态。
- 监听
blur事件，配合防抖（比如 200ms），再调一次window.scrollTo(0, lastScrollTop) - 记录
lastScrollTop要在focus前一刻取，而不是依赖document.body.scrollTop（它在 iOS 上常为 0） - 更可靠的方式：
const lastScrollTop = window.visualViewport?.pageTop || window.pageYOffset; - 别用
window.scroll(0, 0)硬滚回顶部，会打断用户浏览上下文
fixed 底部元素被顶飞？换 flex 布局绕开
直接用 position: fixed 做底部按钮或导航栏，软键盘一弹，按钮就飘到屏幕中间——这不是 bug，是浏览器强制缩 visualViewport 导致 fixed 锚点失效。最稳的解法不是修 fixed，而是绕开它。
- 用
min-height: 100dvh+display: flex+flex-direction: column+margin-top: auto把底部元素推到底部 - 底部元素不能是
position: fixed，得是普通块级元素，靠 flex 推下去 - 避免用
100vh直接设高度——iOS Safari 的100vh包含地址栏，实际可视区域更小 - 关键点：flex 布局必须作用在「包含整个页面内容」的容器上，不能只套一层按钮
真正容易被忽略的是：viewport 配置错误会让所有 JS 失效，而 focus 时机不对会让滚动逻辑完全跑偏。这两点没对齐，再复杂的计算或第三方库都救不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
