安卓fixed底部条被顶起根因是webview对visualviewport处理缺陷：键盘弹出仅压缩视觉视口，但fixed仍按原始布局视口计算bottom:0，导致“浮”在键盘上方；ios则同步缩放布局视口故表现正常。
安卓 fixed 底部条被软键盘顶起的根因
不是 CSS 写错了，是安卓 WebView 和 Chrome（尤其 Android 5–10）对 visualViewport 的处理缺陷：软键盘弹出时只压缩视觉视口高度，但 position: fixed 元素仍按原始布局视口计算 bottom: 0，结果“浮”在键盘上方。iOS 则会同步缩放整个布局视口，所以表现正常。
用 padding-bottom + resize 事件兜底最稳
纯 CSS 方案在部分低端安卓机上不可靠，必须配合 JS 检测视口变化。关键不是监听 focus，而是监听 visualviewport 的 resize 事件（现代安卓 WebView 支持），并 fallback 到 window.innerHeight 变化检测：
- 给
body设初始padding-bottom: 56px（按底部条高度） - 监听
visualviewport?.addEventListener('resize', ...)，当visualViewport.height显著变小（如），说明键盘弹出，动态加大 <code>body.paddingBottom（比如加到200px） - 监听
window.addEventListener('resize', ...)作为降级：比较window.innerHeight与上次记录值，下降 >80px 就认为键盘弹出 - 键盘收起后，需延时 100ms 再恢复原
padding-bottom，避免 Safari/安卓 WebView 渲染抖动
避免在 fixed 底部条里放 input 或 textarea
这是高危操作——哪怕你修复了下沉，iOS Safari 和部分安卓 Webview 仍会把焦点元素强行“提”到键盘上方，导致 fixed 条被顶穿。真实场景中应：
- 把输入框放在主体内容区，**不要嵌套在 fixed 容器内**
- 底部条只放按钮（如“提交”“下一步”），点击后才聚焦对应 input
- 若必须集成（如聊天输入框），改用
position: absolute+ 父容器position: relative，并监听focusin动态调整父容器padding-bottom，而非依赖 fixed
安全边距要适配全面屏 + 键盘双重挤压
仅考虑键盘还不够。iPhone X 后的全面屏、安卓带圆角/挖孔/手势条的机型，底部安全区（env(safe-area-inset-bottom)）和软键盘可能同时生效，叠加挤压。正确做法是：
- CSS 中用
padding-bottom: calc(56px + env(safe-area-inset-bottom))作为基础值 - JS 动态调整时，把键盘高度和
safe-area-inset-bottom相加再设为padding-bottom，不能只覆盖其中一个 - 测试时务必用真机：Chrome DevTools 的设备模拟器不触发
visualviewport.resize，也模拟不出安全区挤压效果
visualViewport.height、window.innerHeight、document.documentElement.scrollHeight 三者关系会异常，必须用差值+阈值+防抖组合判断，不能只依赖单一指标。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
