怎样通过CSS3让固定定位元素在移动端虚拟键盘唤起时自动避让-css教程-PHP中文网

能，但仅限iOS Safari 16.4+；安卓及其他旧浏览器必须搭配JS兜底。根本原因是fixed锚定视觉视口底部，键盘弹出时视口塌陷但定位值不重算；最优纯CSS解法是bottom: env(keyboard-inset-bottom, 0px)，需viewport-fit=cover和@supports降级，同时推荐sticky或flex布局替代，并以focusin/blur监听为必选兜底。

怎样通过css3让固定定位元素在移动端虚拟键盘唤起时自动避让

能，但仅限 iOS Safari 16.4+；安卓和其他旧浏览器必须搭配 JS 才能落地。这不是 CSS 写法问题，而是浏览器把 position: fixed 锚定在「视觉视口（visual viewport）」底部，键盘一弹，这个视口就塌了，但元素位置不重算——bottom: 0 还是那个 0，只是底下已经没空间了。

用 `env(keyboard-inset-bottom)` 做 iOS 原生避让

这是目前最干净的纯 CSS 解法，零 JS，但硬性依赖 iOS Safari 16.4+：

必须在中启用适配：
写法必须带 fallback：bottom: env(keyboard-inset-bottom, 0px)，不能只写 env(keyboard-inset-bottom)，否则键盘收起后按钮悬空

必须用 @supports 降级，否则旧版 Safari（如 15.3）会忽略整条规则甚至解析失败：

@supports (bottom: env(keyboard-inset-bottom)) {
  .footer {
    bottom: env(keyboard-inset-bottom, 0px);
  }
}

别和 svh 或 safe-area-inset-bottom 混用——前者是高度单位，后者管刘海，都不管键盘

为什么 `position: sticky` 或 `flex` 布局更兼容

它们不依赖视觉视口锚点，天然规避定位失效问题，但有前提约束：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

position: sticky 要求父容器设 height: 100vh 或 min-height: 100vh，且 overflow-y: auto；底部元素写 position: sticky; bottom: 0，不是 top: 0
若父容器用了 transform 或 overflow: hidden，sticky 会静默失效，无任何提示
flex 方案需根容器设 display: flex; flex-direction: column; min-height: 100dvh（推荐 dvh，避免 iOS 地址栏导致的 100vh 偏差），内容区用 flex: 1; overflow-y: auto，底部区域作为兄弟节点，不设 position，只加 flex-shrink: 0

监听 `focusin`/`blur` 是必做的兜底动作

纯 CSS 无法感知键盘状态，安卓完全不支持 env(keyboard-inset-bottom)，iOS 15.x 及更早版本也不识别：

监听所有可聚焦元素：input、textarea、[contenteditable]，漏掉 textarea 就等于漏掉一半场景
focusin 回调里必须加 setTimeout(() => {}, 0)，否则 getBoundingClientRect() 返回的是键盘弹出前的旧坐标
计算 bottom 值用 window.innerHeight - inputRect.bottom，不是写死数值
blur 后立刻恢复 position: fixed 和原始 bottom: 0，并调用 el.style.removeProperty('top') 和 el.style.removeProperty('bottom') 清除残留 inline 样式

真正容易被忽略的点是：iOS 键盘收起后 window.innerHeight 不立即恢复，focusin 触发早于键盘完全展开，window.scrollTo() 在 Safari 中还有节流策略——这意味着延迟读取、阈值判断和手动锚点恢复不是可选项，是必做动作。哪怕用了 env(keyboard-inset-bottom)，也得为老版本兜底，且不能跳过状态清理。