env(keyboard-inset-bottom)仅ios safari 16.4+支持，需viewport-fit=cover、fallback写法及@supports包裹，安卓完全不识别，不可作为通用解法，纯css避让仅限该环境。
env(keyboard-inset-bottom) 能用，但只对 iOS Safari 16.4+ 有效，安卓和其他浏览器完全不识别——别把它当通用解法，它只是 iOS 的“加速键”。
用 env(keyboard-inset-bottom) 做 iOS 原生避让（仅限 Safari 16.4+）
这是目前唯一无需 JS 的纯 CSS 方案，但它生效有硬性前提，漏一个就失效：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须存在，否则变量值始终为0px - 写法必须是
bottom: env(keyboard-inset-bottom, 0px)，0px是 fallback，漏掉会导致键盘收起后按钮悬空 - 必须用
@supports (bottom: env(keyboard-inset-bottom))包裹，否则旧版 Safari 会整条规则忽略，甚至解析失败 - 不能和
svh或dvh混用，比如bottom: calc(0px + 100svh)是错的——env(keyboard-inset-bottom)是偏移量，svh是高度单位，语义不兼容
为什么 bottom: 0 和 100vh 都无效
因为这些值在键盘弹出前后不会重算：fixed 元素锚定的是「视觉视口」底部，而软键盘会压缩或上推该视口，但 CSS 静态值无法响应这种运行时变化。常见错误包括：
- 只写
bottom: 0—— 键盘一出，元素立刻飘到新视口底边，也就是键盘上方空白处 - 用
height: 100vh控制容器高度 ——vh基于 layout viewport，不随键盘变化，塌陷或溢出都可能发生 - 依赖
@media (max-height: ...)或window.innerHeight的 CSS 变量 —— 这些无法被 CSS 引擎实时监听，纯属无效尝试
安卓和老 iOS 必须降级，不能只靠 env()
安卓 WebView、iOS Safari 15.x 及更早版本完全不支持 env(keyboard-inset-bottom)，此时纯 CSS 已无可靠方案。你只能：
- 用
padding-bottom在内容区预留空间（如#app { padding-bottom: 60px; }），兼容性最广，但会常驻留白，且需配合box-sizing: border-box - 改用
position: sticky（前提是底部栏紧贴内容流末端），父容器设min-height: 100vh，且不能有transform或overflow: hidden - 接受现实：纯 CSS 无法感知键盘状态，所谓“纯 CSS 解决”只存在于 iOS 16.4+ 的特定环境里；其他场景必须引入 JS 监听
focusin/blur或visualViewport
env(keyboard-inset-bottom) 是苹果第一次把这件事做成标准能力，但它只在 Safari 16.4+ 生效——其余所有平台，CSS 层面就是盲区。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
