移动端 fixed 底部悬浮条被软键盘顶起，因锚定视觉视口；iOS 16.4+ 推荐用 env(keyboard-inset-bottom) 配合 viewport-fit=cover 和 @supports 降级，安卓需改 absolute + focus 监听与延时恢复，WebView 还需原生配置 adjustResize。
移动端 position: fixed 底部悬浮条（比如提交按钮、分类栏、操作栏）被软键盘顶起，不是样式写错了，而是浏览器把 fixed 元素锚定在「视觉视口（visual viewport）」上——键盘弹出会压缩这个视口，但元素的 bottom 值不会自动重算，结果就浮在键盘上方空白处。iOS 和安卓行为不一致，纯 CSS 无法感知键盘状态，必须组合环境变量、定位策略和 JS 监听才能稳定避让。
用 env(keyboard-inset-bottom) 做 iOS 原生避让（16.4+）
这是目前最干净的方案，零 JS，但仅限 iOS Safari 16.4 及以上支持：
- 必须在
<meta>中启用适配：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 底部元素写法：
bottom: env(keyboard-inset-bottom, 0px);——键盘弹出时自动上浮，收起后回退到0px - 必须用
@supports降级，否则旧版 Safari 会忽略整条规则甚至解析失败：@supports (bottom: env(keyboard-inset-bottom)) { .footer-bar { bottom: env(keyboard-inset-bottom, 0px); } }
安卓端 fallback：改用 position: absolute + window.resize 动态计算
安卓 WebView 不支持 env()，且 resize 事件触发时机不稳定（键盘弹出/收起都会触发，但高度变化滞后），不能直接靠 $(window).height() 差值算键盘高：
- 先确保根容器有明确高度：
html, body { height: 100%; min-height: 100vh; }，禁用height: 100vh（它会锁死视口） - 监听
focusin和focusout，而非只靠resize；focusin时记录原始视口高度，focusout后延时 300ms 再恢复bottom - 推荐写法是把悬浮条从
fixed切换为absolute，并挂载在某个有position: relative的父容器底部，这样它随内容滚动而“相对固定”，避开视觉视口干扰
避免 fixed 错误叠加导致多层错位
常见误区是给多个子元素（如多个卡片、tab 栏）都加 position: fixed，结果它们全部锚定到同一视口坐标，堆叠在一起：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
fixed是相对于视口定位，不是父容器；若没设top/bottom/left/right，默认为auto，位置不可控 - 如果必须保留
fixed，整个悬浮区域应只有一个根元素设fixed，内部用flex或grid排列，不要对子项重复设fixed - 微信内置浏览器、部分安卓第三方浏览器（如 QQ 浏览器）对
fixed渲染更激进，建议在input外层加一层position: relative容器，防止其影响悬浮条定位流
WebView 场景下必须检查 android:windowSoftInputMode
如果你的 H5 是嵌在原生 App 的 WebView 中，前端再怎么调，也绕不开原生层配置：
- Android 端必须在
AndroidManifest.xml对应 Activity 中设置：android:windowSoftInputMode="adjustResize"（不是adjustPan） - 确保 WebView 的父布局是
LinearLayout或RelativeLayout，且高度设为match_parent；FrameLayout套全屏 WebView 却没设layout_height="match_parent"会导致 resize 失效 - iOS WKWebView 需要额外处理 focus 后滚动异常：在
input聚焦后手动调用element.scrollIntoView({ behavior: 'smooth', block: 'center' })，否则可能被顶出可视区
真正难的不是单个方案，而是三者叠加：iOS 用 env()、安卓用 absolute + focus 监听、WebView 层补原生配置。最容易被忽略的是 iOS 键盘收起延迟——focusout 触发时视口还没完全恢复，此时立刻重置 bottom 会导致悬浮条“闪一下”或短暂错位，必须加防抖和延时。
