fixed元素在键盘弹出时“飘起”是因iOS/安卓WebView未将软键盘视为视口变化，fixed仍按原始window.innerHeight计算；应改用absolute+getBoundingClientRect()动态计算bottom，或监听visualViewport.resize获取真实可视高度。
为什么 fixed 在键盘弹出时会“飘”起来
这不是你 CSS 写错了，而是 iOS 和部分安卓 WebView 根本不把软键盘当作「视口变化」来处理。它们压缩的是 visualViewport.height，但 position: fixed 仍按原始 window.innerHeight 计算位置——结果就是底部按钮突然上浮、卡在半空，甚至被顶出屏幕。用 100vh 或 bottom: 0 都无效，因为这些值不会随键盘动态更新。
改用 absolute + getBoundingClientRect() 动态算 bottom 值
核心是放弃「固定定位」的幻想，在输入框聚焦时临时切为 position: absolute，并用当前输入框在视口中的位置反推底部安全距离：
- 必须在
focusin后加setTimeout(, 0)，否则getBoundingClientRect()拿到的是键盘弹出前的旧坐标 -
bottom值不是写死的，而是window.innerHeight - inputRect.bottom，这样能适配不同机型键盘高度 -
blur时必须立刻恢复position: fixed和bottom: 0，否则滚动时元素会错位或消失 - 多个输入框共用同一底部栏？得用一个全局变量记录当前
active元素，避免重复切换或漏恢复
用 visualViewport API 监听真实可视区域变化
这是目前最准、最轻量的方案，能直接拿到键盘弹出后用户真正看到的高度（visualViewport.height），不依赖抖动的 resize 或不可靠的 window.innerHeight：
- 页面加载时先存下无键盘状态的基准高度：
const baseHeight = visualViewport.height - 监听
visualViewport.addEventListener('resize', () => { })，计算差值：const kbHeight = baseHeight - visualViewport.height - 把这个差值用于调整按钮位置，比如：
btn.style.transform = `translateY(${kbHeight}px)`，比直接改bottom更少触发重排 - iOS Safari 15.4+、Chrome 61+ 支持；老版本需降级，不能只靠它
容易被忽略的兼容性细节
几乎所有方案都卡在三个地方：
立即学习“前端免费学习笔记（深入）”；
- iOS 键盘收起后
window.innerHeight不立即恢复，可能延迟几百毫秒 -
focusin触发时机早于键盘完全展开，此时读取innerHeight或getBoundingClientRect()仍是旧值 - Safari 对
window.scrollTo()有节流策略，直接调用可能无效，得配合setTimeout或requestAnimationFrame - 若页面用了
transform（如translateZ(0)）或overflow: hidden，getBoundingClientRect()返回的坐标可能严重失真
