visualviewport.resize是唯一稳定感知键盘状态的机制，因ios不触发window.resize、android触发滞后；需用差值法判断键盘状态，并以transform补偿fixed元素位移，配合scrollintoview兜底。
visualViewport.resize 是目前在 iOS 和主流 Android 浏览器中唯一稳定感知键盘弹出/收起的机制，window.resize 在 iOS 上基本不可靠。
为什么必须用 visualViewport.addEventListener('resize', ...) 而不是 window.addEventListener('resize', ...)
iOS Safari 完全不触发 window.resize 事件（哪怕键盘弹出时 window.innerHeight 确实变了）；Android Chrome 虽然会触发，但时机滞后、频率不稳定，且和滚动事件混杂。而 visualViewport 在键盘弹出/收起瞬间必定触发 resize，且只响应视觉视口变化，语义清晰。
常见错误现象：
- 写了
window.addEventListener('resize', ...)，在 iOS 上完全没反应 - 监听了
window.scroll或focus，结果键盘还没完全展开就执行了位移，导致元素“卡在半空”
正确做法是只绑定一次：
if ('visualViewport' in window) {
visualViewport.addEventListener('resize', handleResize);
}
如何用 visualViewport.height 差值判断键盘状态，而不是绝对值
不同设备、输入法、横竖屏下键盘高度差异极大：iOS 数字键盘最小约 216px，全键盘超 300px；Android 常见 250–400px；小屏手机正常浏览时 visualViewport.height 可能只有 480px。硬写 if (visualViewport.height 必然误判。
应采用动态基线 + 差值容差：
- 页面加载后延迟 300ms 采样初始
visualViewport.height，避开地址栏未收起等干扰 - 每次
resize中计算delta = baselineHeight - visualViewport.height - 设容差阈值为 150px：当
delta > 150视为键盘弹出；当delta 视为已收起
示例关键逻辑：
let baselineHeight = 0;
setTimeout(() => { baselineHeight = visualViewport.height; }, 300);
<p>function handleResize() {
const delta = baselineHeight - visualViewport.height;
if (delta > 150) {
// 键盘大概率已弹出
} else if (delta </p><h3>修复 <code>position: fixed</code> 元素被顶起：只用 <code>transform: translateY()</code>
</h3><p>键盘弹出时，<code>position: fixed</code> 元素仍锚定在布局视口底边，但视觉视口上移了——表现为底部按钮“浮”在键盘上方。直接改 <code>top</code> 或 <code>bottom</code> 会强制触发重排（reflow），造成卡顿甚至闪烁。</p><p>正确做法是仅用合成层属性补偿：</p>
- 监听到键盘弹出后，读取当前
visualViewport.offsetTop（即页面被推高的像素值） - 对需要贴底的容器（如
#submit-bar）设置style.transform = `translateY(-${offsetTop}px)` - 键盘收起时还原为
translateY(0)，避免残留偏移
注意：offsetTop 在 Safari 中恒为 0，此时只能依赖 height 差值 + 手动缓存焦点元素位置来估算位移量。
输入框聚焦后仍被遮挡？用 scrollIntoView({ block: 'nearest' }) 补救
即使做了 transform 修正，某些场景（如输入框在局部滚动容器内、或父级有 overflow: hidden）仍可能遮挡。这时不能依赖 window.scrollTo 或手动算 scrollTop，因为涉及嵌套滚动、缩放、fixed 元素穿透等复杂情况。
scrollIntoView 是目前兼容性最好、代码最轻量的兜底方案：
- 必须在
focusin事件里调用，而非click或focus（时机太早） - 加
{ block: 'nearest', inline: 'nearest' }避免把输入框顶到顶部反而盖住光标 - 老版微信 X5 内核不支持
behavior: 'smooth'，直接去掉该参数更稳妥
示例：
input.addEventListener('focusin', () => {
input.scrollIntoView({ block: 'nearest', inline: 'nearest' });
});
真正麻烦的是 visualViewport 在 Android WebView 中普遍不支持，而 iOS 的 offsetTop 又恒为 0 —— 这意味着你得为不同平台准备至少两套 fallback 逻辑，且必须在运行时探测能力而非 UA 判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
