优先用 min-height: 100dvh 而非 height: 100vh，因 100vh 在 iOS Safari 等浏览器中会将地址栏高度计入视口导致跳动，而 100dvh 动态响应真实可视高度，且需搭配 min-height 以支持内容自然延展；同时需确保 html/body 无边距、父容器设 display: flex 并启用 justify-content 和 align-items 居中。
为什么优先用 min-height: 100dvh 而不是 height: 100vh
因为 100vh 在 iOS Safari 和部分安卓浏览器中会把地址栏高度算进视口，滚动时地址栏收起/展开导致视口真实高度变化，但 100vh 值不实时更新，造成内容“跳动”“截断”或“底部留白”。100dvh（dynamic viewport height）是动态视口单位，始终反映当前可视区域真实高度，2026 年主流浏览器（Chrome 105+、Firefox 106+、Safari 16.4+）已稳定支持。
但 100dvh 不能直接当“刚性高度”用——它只提供最小基准，内容超长时仍需自然延展。所以必须搭配 min-height，而非 height：
-
height: 100dvh会强制裁切超出部分，滚动失效 -
min-height: 100dvh保证至少一屏，内容多时自动撑高，不破坏文档流 - 若需兼容 Safari 16.3 及更早版本，可加
@supports降级回min-height: 100vh
display: flex 居中必须满足的三个前提
只写 justify-content: center 和 align-items: center 不生效，常见于移动端调试失败。根本原因是 Flex 对齐依赖父容器在交叉轴（默认为垂直方向）上有明确可计算的高度，而 min-height: 100dvh 本身不等于“有高度”，还需显式触发 Flex 行为：
- 父容器必须设
display: flex（不能只在子元素上设） - 必须同时声明
justify-content: center（主轴居中）和align-items: center（交叉轴居中） -
html和body需重置默认边距：html, body { margin: 0; padding: 0; }，否则顶部/底部可能露白或偏移
漏掉任一条件，文字就容易“贴顶”或“偏左”，看着像居中失败，其实是容器没真正撑开或对齐未激活。
立即学习“前端免费学习笔记（深入）”；
移动端适配中容易被忽略的样式干扰
即使写了 min-height: 100dvh + display: flex，iOS 上仍可能出现高度不足或滚动条意外出现。问题往往藏在这些地方：
- 父级元素用了
position: fixed或position: absolute，导致脱离文档流，min-height失效 - 容器内有
padding或border，但没设box-sizing: border-box，实际高度超出100dvh，触发滚动条 - 背景图用了
background-size: cover，但父容器没设background-repeat: no-repeat，图片重复平铺干扰视觉判断 - 字体在 iOS 上因动态缩放变大，撑高内容，但
min-height不会自动收缩——这是正常行为，不是 bug
完整可复制的最小可用结构
以下代码经 2026 年主流机型实测（iPhone 15 / Pixel 8 / iPadOS 17），无 JS 依赖，支持内容延展与背景安全：
html, body {
margin: 0;
padding: 0;
}
<p>.hero {
min-height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
}</p><p>/<em> 兼容 fallback </em>/
@supports not (min-height: 100dvh) {
.hero {
min-height: 100vh;
}
}</p><p>/<em> iOS 9–11 降级（极少需要，但留着不碍事） </em>/
@supports not (align-items: center) {
.hero {
margin-top: auto;
margin-bottom: auto;
}
}注意：如果页面含固定 header/footer，别把 min-height: 100dvh 直接套在 body 上——应作用于具体区块（如 .hero），避免全局高度冲突。复杂布局建议改用 Flex column 布局分配剩余空间，比硬塞 dvh 更鲁棒。
