CSS媒体查询对虚拟键盘无响应，纯靠它解决不了底部fixed被顶起的问题；必须配合JS监听resize事件，并用window.innerHeight做高度比对才实际有效。因为媒体查询不响应键盘导致的视口动态压缩，仅resize结合innerHeight才能可靠捕获高度突变并触发适配逻辑。
直接结论：CSS媒体查询对虚拟键盘无响应，纯靠它解决不了底部fixed被顶起的问题；必须配合JS监听resize事件，并用window.innerHeight做高度比对才实际有效。
为什么CSS媒体查询在键盘弹出时基本失效
CSS媒体查询（如@media (max-height: 600px)）依赖的是初始视口尺寸或设备物理参数，而虚拟键盘弹出时并不会触发媒体查询重计算——它只是动态压缩了window.innerHeight，但不会改变screen.height或触发matchMedia回调。iOS和多数Android WebView中，键盘唤起后媒体查询规则仍维持原样，样式不会自动切换。
resize事件监听 + window.innerHeight判断的实操要点
这是目前兼容性最好、落地最稳的方案，核心是捕获键盘导致的视口高度突变：
- 页面加载时先缓存初始
window.innerHeight值，记为baseHeight - 绑定
window.addEventListener('resize', handler)，注意不要用onresize赋值方式（会覆盖其他监听） - 在
handler里比较window.innerHeight与baseHeight：差值 > 150px 基本可判定键盘已弹出 - 键盘弹出时，把底部
fixed元素的position临时改为static，或用transform: translateY()上移避开 - 键盘收起后，需等
resize再次触发再恢复fixed，不能靠blur事件——用户可能点键盘“收起”按钮，input仍保持焦点
容易踩的坑：iOS Safari 的resize延迟与抖动
iOS Safari 中resize事件常在键盘完全展开后才触发，且可能连续触发2–3次，导致fixed元素反复切换位置。应对方法：
jm-jsjkxyjs02-zlm-405
下载
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
立即学习“前端免费学习笔记（深入）”；
- 加简单防抖：用
setTimeout+clearTimeout控制处理频率，延迟300ms再执行定位逻辑 - 不依赖单次
resize，而是记录最近两次window.innerHeight值，只在高度稳定后更新状态 - 避免在
resize里直接操作style.position，改用预设CSS类（如.footer--keyboard-active），减少重排压力 - 慎用
document.body.clientHeight或document.documentElement.scrollHeight——它们在键盘弹出期间可能未及时更新，window.innerHeight才是唯一可信指标
为什么不推荐只监听focus/blur
单纯靠input的focus事件去隐藏底部按钮，会漏掉关键场景：
- 用户长按输入框调出“粘贴/选择”菜单，键盘未弹出但
focus已触发 - 软键盘自带“收起”按钮（尤其iOS），点击后
input仍focused，blur根本不会触发 - 多输入框页面中，从一个
input切到另一个，blur → focus连发，底部元素频繁闪动
真正需要响应的，是视口空间是否被挤压——这个信号只有resize + window.innerHeight能可靠给出。
