根本原因是Android WebView在软键盘收起后未触发媒体查询重计算，导致样式卡滞；需配合JS监听body高度变化或VisualViewport API实现可靠响应。
为什么@media (min-aspect-ratio)在键盘收起后不恢复显示？
这个媒体查询方案看似简洁，但实际运行中常出现「键盘弹出时按钮隐藏，键盘收起后按钮仍不显示」的问题。根本原因在于：Android软键盘弹出时，浏览器视口（viewport）高度被压缩，触发了min-aspect-ratio: 13/20；但键盘收起后，部分安卓 WebView（尤其旧版 Chrome 或厂商定制内核）并不会立即重绘或触发媒体查询重计算，导致样式卡在「已隐藏」状态。
resize事件监听 + document.body.clientHeight才是可靠 fallback
不能只依赖 CSS 媒体查询，必须配合 JS 检测真实视口变化。重点不是监听window.resize（它在软键盘场景下基本不触发），而是监听document.body或根容器的height突变：
- 在
onload或DOMContentLoaded后，先缓存初始document.body.clientHeight - 用
new MutationObserver监听document.documentElement的style或class变更（某些内核会加keyboard-open类） - 更通用的做法是用
VisualViewportAPI（Chrome 61+、Android WebView 76+ 支持）：if ('visualViewport' in window) { visualViewport.addEventListener('resize', () => { const isKeyboardOpen = visualViewport.height < window.innerHeight * 0.75; document.body.classList.toggle('keyboard-open', isKeyboardOpen); }); }
固定底部元素必须脱离文档流且避免position: fixed滥用
在安卓 H5 中，position: fixed 在软键盘弹出时行为极不稳定——有些机型会把它“钉”在视口底部，有些则随页面一起上移。真正可控的方式是：
- 将底部按钮包裹进一个
position: absolute容器，该容器父级设为position: relative且高度占满屏幕（如min-height: 100vh） - 按钮自身用
bottom: env(safe-area-inset-bottom, 0)对齐安全区，而非硬写bottom: 2.5vw - 配合 JS 动态控制该容器的
visibility或transform: translateY()，比display: none更利于回流复原
真机测试必须覆盖 Android 10–14 的 WebView 内核差异
同一个 CSS 媒体查询在不同系统版本表现可能完全相反。例如：
立即学习“前端免费学习笔记（深入）”；
- Android 10（WebView 75）：
min-aspect-ratio: 13/20在键盘弹出时基本可靠 - Android 12（WebView 99）：部分 OEM（如小米 HyperOS）会伪造 viewport 尺寸，导致
aspect-ratio始终不匹配 - Android 14（WebView 120+）：
VisualViewport成为主力检测手段，但需注意visualViewport.height在键盘收起瞬间存在 1–2 帧延迟
最易被忽略的是：你写的@media规则可能被更高优先级的全局样式覆盖，务必用!important或提升选择器权重（如html.keyboard-open .button）确保生效。
