本文介绍如何让 height: 100vh 的全屏 Header 在移动设备上正确适配视口高度，避免因 Safari/Chrome 移动端 vh 单位计算异常导致的滚动条问题，并提供响应式媒体查询+备用单位的可靠方案。
本文介绍如何让 height: 100vh 的全屏 header 在移动设备上正确适配视口高度，避免因 safari/chrome 移动端 vh 单位计算异常导致的滚动条问题，并提供响应式媒体查询+备用单位的可靠方案。
在构建单页应用或营销落地页时，常需设置 <header></header> 占满整个可视区域（即“全屏 Header”），CSS 中通常使用 height: 100vh 实现。该写法在桌面浏览器中表现稳定，但在 iOS Safari 和部分 Android Chrome 中却容易出现高度溢出、触发垂直滚动条的问题——根本原因在于：移动端浏览器将地址栏、工具栏等 UI 区域也计入 vh 计算，导致 100vh 实际高于用户可见视口（尤其是页面滚动后地址栏隐藏时，vh 值却未动态更新）。
为解决这一兼容性痛点，推荐采用「媒体查询 + 高度回退」策略，而非单纯依赖 vh：
header {
position: relative;
background-color: black;
height: 100vh; /* 默认使用 vh，桌面端优先 */
min-height: 25rem; /* 提供最小高度保障（如 400px） */
width: 100%;
overflow: hidden;
}
/* 针对小屏幕高度设备（典型移动设备）启用百分比回退 */
@media (max-height: 700px) {
header {
height: 100%; /* 改用 100% 父容器高度，需确保 html/body 高度可控 */
}
}⚠️ 关键前提：height: 100% 要生效，其父级（通常是 和 ）必须显式定义高度：
html, body {
height: 100%;
margin: 0;
padding: 0;
}此外，更健壮的现代方案可结合 CSS 自定义属性与 dvh（dynamic viewport height）单位（Chrome 100+ / Safari 16.4+ 支持）：
立即学习“前端免费学习笔记（深入）”；
header {
height: 100dvh; /* 优先使用动态视口高度，自动排除地址栏 */
height: 100vh; /* 降级为传统 vh */
min-height: 25rem;
width: 100%;
overflow: hidden;
}✅ 最佳实践建议：
- 优先测试
100dvh（搭配@supports检测）； - 若需兼容旧版 iOS/Safari，采用
@media (max-height: 700px)+height: 100%回退； - 避免仅依赖
vh且无降级逻辑； - 在真实真机（尤其 iPhone Safari）上验证滚动行为，而非仅依赖模拟器。
通过以上组合方案，即可实现跨设备一致的全屏 Header 视觉效果，真正“粘性贴合”用户屏幕，杜绝意外滚动。
