必须用 min-h-[100dvh] 配合 flex 布局并删除 height=device-height 等干扰项，因 vh 单位在键盘弹出时不更新，而 100dvh 才能准确反映当前可视高度，配合 flex-1、flex-shrink-0 和 min-w-0 才能彻底解决移动端塌陷。
直接用 h-screen 或 min-h-screen 在移动端必然塌陷，这不是 Tailwind 的 bug，而是浏览器对视口高度的计算逻辑本身就不适配软键盘和工具栏动态变化。必须换单位、改布局、删干扰项，三者缺一不可。
为什么 min-h-screen 和 h-screen 在键盘弹出时都不可靠
min-h-screen 编译为 min-height: 100vh，h-screen 是 height: 100vh，两者都卡死在初始视口高度上：
- iOS Safari 根本不更新
vh值，键盘弹出后仍按未弹窗前的高度算，容器过高，底部留白或内容被截断 - 部分 Android WebView（如华为、UC）压根不支持
vh，整条规则被忽略 - 哪怕用了
flex-1，父容器若没弹性高度来源，子项照样塌成一条线
优先用 min-h-[100dvh] 配合 flex 布局
100dvh 是唯一语义正确的现代解法，代表“此刻用户真正看到的高度”，iOS 16.4+、Chrome 109+、Firefox 117+ 已稳定支持：
- 必须写成
min-h-[100dvh]，不是h-[100dvh]——避免内容超长时被裁剪 - 必须配合
flex flex-col使用，否则min-h-[100dvh]只设最小高度，不触发子项弹性分配 - 主内容区加
flex-1（即flex: 1 1 0%），更推荐显式写flex-grow flex-shrink-0 min-w-0防文字溢出拉宽 - 底部固定区域（如提交按钮）必须加
flex-shrink-0，否则键盘弹出时会被压缩变形 - 别给
html或body设h-full或min-h-full，这会干扰dvh行为
必须删除 meta 中的 height=device-height 干扰项
这个参数会让所有 vh 类单位失效，是很多项目里藏得最深的坑：
- 检查
<meta name="viewport">是否含height=device-height，有就删掉 - 确保 viewport 至少包含
width=device-width, initial-scale=1.0，且不能带maximum-scale=1或user-scalable=no，否则dvh和visualViewport全部失效 - 侧边栏或弹窗若用了
fixed定位但没脱离文档流，其父容器仍占位，会撑高根容器引发滚动条，间接破坏 flex 高度计算
兜底方案：focus/blur 切 class 控制高度
CSS 无法感知键盘，但输入框聚焦是最强信号。用 JS 监听 focusin 和 blur 动态切 class 是目前最可控的兼容手段：
- 在
focusin后用setTimeout(() => {}, 0)读取visualViewport?.height，再设置body的style.height为该值 - 别用
window.innerHeight——iOS 键盘收起后它可能延迟更新，造成回弹错位 - 必须在
blur后恢复auto高度，否则页面滚动时定位异常 - 多个输入框共用同一底部栏时，需用
document.activeElement统一判断焦点状态，避免重复切换
哪怕用了 100dvh + flex，只要漏掉 meta 干扰项、flex-shrink-0 或 min-w-0，塌陷依然会重现——这些细节不是锦上添花，而是生效前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
