软键盘遮挡输入框的根因是viewport配置错误和事件时机不匹配；应在focus事件中立即调用scrollIntoView({block:'nearest',inline:'nearest'})，并确保viewport含height=device-height且禁用user-scalable=no。
软键盘遮挡输入框，不是样式写错了，而是 viewport 行为和事件时机没对上——直接用 scrollIntoView({ block: 'nearest', inline: 'nearest' }) 在 focus 里调，90% 场景能稳住。
focus 事件里调 scrollIntoView 最省事
别等 resize 或 focusin，iOS 和 Android 对这些事件的触发时机不一致，尤其 iOS Safari 在键盘弹出前就发了 focus，此时调 scrollIntoView 反而最准。
-
scrollIntoView({ block: 'nearest', inline: 'nearest' })不会强行滚到顶部，只做最小必要滚动，避免光标被顶出视口 - 老版微信 X5 内核不支持
behavior: 'smooth'，删掉更稳妥 - 不要在
click里调，部分 Android 会抢在 focus 前执行，导致滚动失效 - 示例：
input.addEventListener('focus', () => {<br> input.scrollIntoView({ block: 'nearest', inline: 'nearest' });<br>});
viewport meta 标签写错会让所有 JS 失效
很多问题根本不是 JS 没写对，而是 锁死了 visualViewport 高度，浏览器压根不通知键盘弹起。
- 必须包含
height=device-height，否则 iOS Safari 的window.innerHeight在键盘弹出后不变，JS 无法感知遮挡 - 绝对禁用
user-scalable=no—— 它会让 iOS 忽略键盘弹出时的 viewport 重绘，visualViewport.height永远等于屏幕高度 - 推荐写法：
- Android Chrome 对
height=device-height支持弱，但至少不会让情况更糟；user-scalable=no在 iOS 上是静默破坏，比不写还危险
键盘收起后页面卡在错误位置
focus 时滚上去了，blur 时不处理，页面就悬在半空——用户再点别的地方，光标可能直接消失。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 监听
blur事件，配合防抖（比如 200ms），再调一次window.scrollTo(0, lastScrollTop) - 别用
window.scroll(0, 0)硬滚回顶部，会打断用户浏览上下文 - 记录
lastScrollTop要在focus前一刻取，而不是依赖document.body.scrollTop（它在 iOS 上常为 0） - 更可靠的方式：
const lastScrollTop = window.visualViewport?.pageTop || window.pageYOffset;，fallback 到pageYOffset
fixed 底部输入框 + 遮罩层场景要临时改定位
如果输入框在 position: fixed; bottom: 0 的弹窗或遮罩层里，键盘一弹，整个遮罩层会被压进键盘下面——这时靠 scrollIntoView 没用，因为父容器本身就不滚动。
- focus 时把遮罩层改成
position: absolute，并手动设top为当前视口底部减去预估键盘高度（如visualViewport.height - 200） - blur 时立刻切回
position: fixed; bottom: 0 - 注意：X5 内核不支持
visualViewport，得 fallback 到监听resize后延时取window.innerHeight差值 - 示例：
input.addEventListener('focus', () => {<br> overlay.style.position = 'absolute';<br> overlay.style.top = (window.innerHeight - 250) + 'px'; // 250 是粗略键盘高<br>});<br>input.addEventListener('blur', () => {<br> overlay.style.position = 'fixed';<br> overlay.style.bottom = '0';<br>});
真正麻烦的不是怎么滚上去，而是不同机型、不同 WebView 对 visualViewport、resize、focus 的触发节奏差异太大。优先保 focus + scrollIntoView + 正确 viewport 这个组合，其余情况再按需打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
