ios和安卓webview不将软键盘视为视口变化，fixed元素仍按原始window.innerheight计算位置，导致底部元素上浮；应改用focusin/blur配合getboundingclientrect动态计算bottom值并切换absolute/fixed定位。
为什么 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 元素，避免重复切换或漏恢复
示例关键逻辑：
const footer = document.querySelector('.footer');<br>inputs.forEach(input => {<br> input.addEventListener('focusin', () => {<br> setTimeout(() => {<br> const rect = input.getBoundingClientRect();<br> footer.style.position = 'absolute';<br> footer.style.bottom = `${window.innerHeight - rect.bottom}px`;<br> }, 0);<br> });<br> input.addEventListener('blur', () => {<br> footer.style.position = 'fixed';<br> footer.style.bottom = '0';<br> });<br>});
为什么不能只靠 resize 监听
resize 在 iOS 上经常不触发，或者延迟几百毫秒才响应，等事件来临时键盘早已弹出、UI 已错乱。安卓行为更分裂：有些版本触发，有些压根不认。而 focusin 是唯一稳定、及时、可预测的入口点——只要用户点了输入框，你就知道键盘大概率要来了。
- 别用
window.onresize做主逻辑，它只能当辅助兜底（比如处理横竖屏切换） - 不要在
resize回调里直接改style.top，这会强制同步重排，卡顿明显 - 如果用了
visualViewportAPI，也要注意它只在 Chrome 61+ / Safari 15.4+ / Edge 79+ 可用，老版本必须降级到 focus/blur 方案
容易被忽略的兼容性细节
最常踩的坑不是代码逻辑，而是环境假设太乐观：
- 没做
'visualViewport' in window检测就直接调用，导致老机型白屏或报错 - 给
body加了overflow: hidden，结果键盘收起时页面无法自动滚动回原位 - 在父容器上用了
transform或filter，让fixed退化成 relative，再怎么算 bottom 都没用 - 以为
env(keyboard-inset-bottom)能通吃——但它只在 iOS 16.4+ 支持，安卓至今无标准实现
真正稳的方案永远是：用 focusin/blur 触发时机，用 getBoundingClientRect() 算真实位置，用内联样式快速切换，不依赖任何新 API 的存在性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
