用 position: absolute 模拟 fixed 是最兼容的解法，需父容器 relative+min-height:100vh、底部区域 width:100%、focusin/blur 动态切换；focusin 比 resize 更可靠，须 setTimeout 读取重排后坐标，env(keyboard-inset-bottom) 需降级 fallback。
直接用 position: absolute 替代 position: fixed 是目前兼容性最广、落地最稳的解法，不是“换写法”，而是把定位锚点从不可靠的视口切换到你完全可控的父容器上。
为什么 focusin/blur 比 resize 更可靠
window.onresize 在 iOS 微信 WebView 中触发率低于 20%，安卓 Chrome 可能延迟 300ms 才发事件，而错位在点击 input 的瞬间就发生了。focusin 是唯一稳定、及时、可预测的入口点——它冒泡、兼容老版本、且总在用户交互后立即触发。
- 别用
focus：不冒泡，监听不到子元素聚焦 - 别只监听
input：漏掉textarea和contenteditable元素 - 别在
focusin回调里立刻读window.innerHeight：键盘还没展开，值仍是旧的
absolute 模拟 fixed 必须满足的三个硬条件
只写 position: absolute; bottom: 0 会穿帮。真正起效需同时满足：
- 根容器（如
#app）必须设position: relative且min-height: 100vh（不能只写height: 100%，否则滚动或键盘弹出时塌陷） - 底部区域必须加
width: 100%，否则横屏缩放后宽度失真 - 必须监听
focusin/blur动态切换定位方式，不能依赖初始样式
focusin 后如何安全计算 bottom 值
不能直接用 input.getBoundingClientRect().bottom ——focusin 触发时 DOM 还没重排，坐标是弹出前的旧值；也不能用 offsetTop，它在 relative 容器下不可靠。
- 必须加
setTimeout(() => { ... }, 0)，确保浏览器完成重排后再取坐标 - bottom 值应为
window.innerHeight - inputRect.bottom，而非写死数值 - 多个输入框共用同一底部栏？得用全局变量记录当前
document.activeElement，避免重复切换或漏恢复 -
blur后必须立刻恢复position: fixed和bottom: 0，否则滚动时元素会消失
env(keyboard-inset-bottom) 能用但不能全靠它
iOS Safari 16.4+ 原生支持 env(keyboard-inset-bottom)，键盘弹出时自动返回高度，CSS 层面就能响应。但它仅限 iOS，安卓完全不支持，且旧版 Safari（如 15.3）也不识别。
- 必须配合
@supports (bottom: env(keyboard-inset-bottom))降级，否则整条规则被忽略 - 必须加
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 务必写 fallback：
bottom: env(keyboard-inset-bottom, 0px)，否则键盘收起后按钮悬空
真正难的不是选哪个方案，而是处理状态同步的边界：iOS 键盘收起后 window.innerHeight 不立即恢复、scrollTo(0, 0) 被 Safari 节流、transform 父级导致 getBoundingClientRect() 失真——这些细节不验证真机就容易漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
