h-screen在移动端会“抖”是因为它编译为height: 100vh，而100vh基于初始视口静态计算，ios safari和部分android chrome滚动时地址栏显隐会导致实际视口高度突变，但css不重算vh值，引发内容视觉跳变；应改用min-h-[100dvh]，该单位动态响应当前可见视口高度，safari 16.4+、chrome 108+等已原生支持，且需配合viewport声明、无margin/padding干扰的根元素及flex布局才能生效。
移动端 100vh 在 Safari 和 Chrome 上会因地址栏显示/隐藏导致高度跳变，直接用 h-screen 不可靠；必须改用 min-h-[100dvh]，并确保父容器无 margin、padding 干扰，且页面已声明 viewport。
为什么 h-screen 在移动端会“抖”？
h-screen 编译为 height: 100vh，而浏览器对 vh 的实现依赖于「视口初始高度」——iOS Safari 和部分 Android Chrome 会在滚动时动态调整地址栏高度，导致 100vh 值突变（比如从 667px 变成 730px），视觉上就是内容突然拉升或塌陷。
这不是 Tailwind 的 bug，是 CSS 规范与浏览器实现的固有差异。你无法靠加 !important 或覆盖 transition 解决。
正确写法：优先用 min-h-[100dvh]
dvh（dynamic viewport height）是 CSS Viewport Units Level 2 标准引入的单位，它始终取「当前可用视口高度」，不受地址栏伸缩影响。Safari 16.4+、Chrome 108+、Firefox 110+ 已原生支持。
- 直接替换：
h-screen→min-h-[100dvh] - 若需严格等高（如全屏背景图容器），可补
max-h-[100dvh]防止内容溢出拉伸 - 不推荐
h-[100dvh]：当内容少于视口时，h-会强制截断，可能切掉底部按钮或表单
必须配合的 HTML 和 CSS 基础条件
光换单位不够，以下三点漏一即失效：
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在且未被覆盖（检查是否有多余的 viewport meta） - 根元素（
或直接父容器）不能有margin、padding或border，否则min-h-[100dvh]会撑开外部空间 - 避免在该容器上同时用
flex+h-full：若父级未设高度，h-full会退化为auto，min-h-[100dvh]才是真正兜底的
兼容旧版浏览器的 fallback 方案
如果项目仍需支持 Safari 100dvh 会被忽略，此时需 JS 补位：
if ('dvh' in CSS.supports && !CSS.supports('height', '100dvh')) {
document.documentElement.style.setProperty('--dvh', `${window.innerHeight * 0.01}px`);
}
然后在 CSS 中：min-h-[calc(100*var(--dvh))]。但注意：这个值需监听 resize 和 scroll 更新，且 iOS 上 scroll 事件节流严重，不如 dvh 稳定。
真正难处理的不是写法本身，而是开发者常把 min-h-[100dvh] 加在嵌套过深的 div 上，而忘了最外层容器是否被 flex 或 grid 的 align-items 拉伸干扰——这时候高度就悄悄被吃掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
