最稳方案是在focus事件中调用scrollintoview({block:'nearest',inline:'nearest'})，配合正确viewport标签和blur时恢复滚动位置。
focus 事件里调用 scrollIntoView 是最稳的起点
输入框被键盘盖住，不是样式写错了，而是浏览器在键盘弹出时重算了视口高度，但 DOM 没自动滚动。手动算 scrollTop 容易错，尤其 iOS Safari 的 window.innerHeight 在键盘刚弹出时还没更新，数值不可信。
scrollIntoView 不依赖你是否用了 overflow: hidden、是否嵌套在 position: relative 里，只要元素在 DOM 中且可聚焦，就能生效。
- 必须在
focus事件回调里调用，不能放在click或input里——时机太早，焦点还没真正落在元素上 - 别用
{ behavior: 'smooth' }——老版微信 X5 内核不支持，直接去掉参数更兼容 - 推荐加
{ block: 'nearest', inline: 'nearest' }：避免把输入框顶到顶部反而遮光标 - 示例：
input.addEventListener('focus', () => {<br> input.scrollIntoView({ block: 'nearest', inline: 'nearest' });<br>});
viewport meta 标签写错会直接让所有滚动逻辑失效
iOS Safari 对 viewport 高度处理极其敏感。写错一个参数，比如漏掉 height=device-height 或写了 user-scalable=no，就会导致 visualViewport.height 始终等于屏幕物理高度，键盘弹起后毫无变化，后续所有基于高度判断的逻辑全崩。
- 必须包含
height=device-height，否则 iOS 无法感知键盘高度变化 - 绝对禁止
user-scalable=no——它会让 iOS 忽略键盘触发的 viewport 重绘 - 推荐写法：
<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 + 防抖恢复
键盘收起时，iOS 页面常卡在被顶起的位置不动，因为 resize 事件触发后，window.innerHeight 已恢复，但滚动位置没回退。直接 window.scrollTo(0, 0) 会打断用户浏览上下文，必须只恢复“被顶起”的那一段。
- 监听
blur事件比监听resize更可靠——只有输入框失焦才可能意味着键盘收起 - 加
setTimeout(..., 100)确保 DOM 渲染完成后再执行滚动 - 不要硬设
scrollTo(0, 0)，应读取原始滚动位置（如页面加载时记录document.documentElement.scrollTop），再回到该位置 - 示例：
let initScrollTop = 0;<br>document.addEventListener('DOMContentLoaded', () => {<br> initScrollTop = document.documentElement.scrollTop || document.body.scrollTop;<br>});<br>input.addEventListener('blur', () => {<br> setTimeout(() => {<br> window.scrollTo(0, initScrollTop);<br> }, 100);<br>});
fixed 元素在键盘弹起时位移，本质是 viewport 缩放而非定位失效
很多人以为 position: fixed 被“破坏”了，其实不是 CSS 失效，而是键盘弹出时，iOS 把整个 viewport 缩小了（表现为 visualViewport.scale ），导致 fixed 元素按缩放后坐标渲染，视觉上就飘走了。
- 别试图用 JS 动态改
bottom值来“补偿”——不同机型键盘高度不一，且 Android 和 iOS 行为不一致 - 真正可行的是：把底部区域从
fixed改成sticky或用 flex 布局撑满容器，让其随内容自然流动 - 如果必须用
fixed，就放弃“始终贴底”，改用bottom: env(safe-area-inset-bottom)+padding-bottom配合，至少不被截断 - 注意：iOS 16.4+ 支持
visualViewport.addEventListener('resize', ...)，但 Android WebView 基本不支持，别把它当通用方案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
