软键盘弹出后页面布局错位的根本原因是浏览器视口计算逻辑失效，需用运行时响应方案而非静态CSS；min-h-[100dvh]配合flex布局、position: absolute替代fixed、env(keyboard-inset-bottom)降级及focusin/blur动态控制是四大核心解法。
软键盘弹出后页面布局错位，不是 CSS 写错了，而是浏览器对视口高度的计算逻辑在运行时失效了——100vh 不更新、position: fixed 锚点漂移、滚动容器被压缩，三者叠加导致偏移。直接改 CSS 类名或加 @media 无效，必须用运行时响应方案。
为什么 100vh 和 min-h-screen 在键盘弹出时塌陷
iOS Safari 根本不更新 vh 单位值，Android 部分 WebView（如华为、UC）甚至忽略整条规则。Tailwind 的 min-h-screen 编译为 min-height: 100vh，键盘弹出后仍按初始屏幕高度撑开，内容被截断或底部留白。
-
min-h-[100dvh]是目前最稳的单位，iOS 16.4+ 和 Chrome 109+ 已稳定支持，它随visualViewport.height动态变化 - 必须配合
flex flex-col使用，否则min-h-[100dvh]只设最小高度，不触发子项弹性分配 - 主内容区加
flex-1或显式flex-grow，底部固定区域（如按钮）必须加flex-shrink-0，否则会被压缩变形 - 删掉
<meta>中的height=device-height—— 这个参数会让所有 vh 类单位失效
怎么用 position: absolute 替代 fixed 避开锚点漂移
position: fixed 错位本质是锚定在不可靠的「视觉视口」上；position: absolute 锚定在你可控的 position: relative 父容器，只要父容器高度稳定，底部元素就不会飘。
- 根容器（如
#app）必须设position: relative和min-height: 100vh（不能只写height: 100%，否则键盘弹出时塌陷） - 底部元素加
width: 100%，否则横屏或缩放后宽度失真 - 监听
focusin（不是focus，它冒泡更可靠）和blur，动态切换定位方式 -
focusin后必须用setTimeout(() => {}, 0)延迟读取getBoundingClientRect()，否则坐标仍是弹出前的旧值 - 计算
bottom值用window.innerHeight - inputRect.bottom，不是写死数值
怎么安全使用 env(keyboard-inset-bottom)
env(keyboard-inset-bottom) 是 iOS Safari 16.4+ 原生支持的最优解，但安卓完全不支持，旧版 Safari（如 15.3）也不识别，不能单独依赖。
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
@supports (bottom: env(keyboard-inset-bottom))降级，否则整条规则被忽略 - 必须写 fallback：
bottom: env(keyboard-inset-bottom, 0px)，不能只写env(keyboard-inset-bottom)，否则键盘收起后按钮悬空 - 必须加
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 真机测试时注意：Safari 在键盘收起瞬间
visualViewport.height有几十毫秒延迟，直接读可能拿到旧值
为什么 @media 查询无法修复错位
@media 只响应静态特征（如屏幕宽高、横竖屏），不监听软键盘弹出这种运行时视口变化。页面加载后匹配完成，之后不会重计算。
-
@media (max-height: 500px)永远捕获不到键盘弹出瞬间的真实高度塌缩 - 某些安卓 WebView 会把键盘弹出后的视口误报为 “device-height”，导致媒体查询完全失效
- 它只能用于预设式降级，比如配合
@supports not (bottom: env(keyboard-inset-bottom))切换 fallback 样式 - 真正需要的是运行时探测：
focusin事件、visualViewport.resize监听、或env(keyboard-inset-bottom)的 CSS 原生响应
最易被忽略的细节是：多个输入框共用同一底部栏时，没用全局变量统一管理 document.activeElement，导致 blur 后误恢复定位，或 focusin 重复计算；还有就是父容器用了 transform（如 translateZ(0)）或 overflow: hidden，干扰了 getBoundingClientRect() 返回的坐标精度。
