解决移动端 100vh 导致页面溢出和滚动条问题，通过媒体查询在小屏幕（如手机）上将 header 高度从 100vh 切换为 100%，确保真正贴合视口且无多余滚动。
解决移动端 `100vh` 导致页面溢出和滚动条问题，通过媒体查询在小屏幕（如手机）上将 header 高度从 `100vh` 切换为 `100%`，确保真正贴合视口且无多余滚动。
在构建全屏首屏 Banner 或视频头图（Video Header）时，使用 height: 100vh 是常见做法，能让 <header></header> 元素严格占据整个视口高度，在桌面端表现完美。但在多数移动浏览器中，100vh 并不等于用户实际可见的可视区域高度——它会包含地址栏、底部导航栏等系统 UI 占用的空间，导致计算出的高度偏大，从而触发垂直滚动条，破坏“全屏沉浸”体验。
根本原因在于：移动端浏览器（如 Chrome for Android、Safari on iOS）在页面加载或滚动时会动态调整视口高度（例如地址栏收起/展开），而 vh 单位基于初始布局视口（layout viewport），并非始终同步于视觉视口（visual viewport）。因此，直接依赖 100vh 在移动端存在固有缺陷。
✅ 推荐解决方案是结合媒体查询进行响应式降级：
header {
position: relative;
background-color: black;
height: 100vh; /* 桌面与大屏默认行为 */
min-height: 25rem; /* 提供最小高度兜底，避免过小设备塌陷 */
width: 100%;
overflow: hidden;
}
/* 针对小屏幕高度设备（典型手机竖屏场景） */
@media (max-height: 700px) {
header {
height: 100%; /* 改用 100% —— 相对于其父容器（通常是 body/html） */
}
}⚠️ 关键前提：确保 html 和 body 元素高度为 100%，否则 height: 100% 将因父级无明确高度而失效：
立即学习“前端免费学习笔记（深入）”；
html, body {
height: 100%;
margin: 0;
padding: 0;
}? 进阶优化建议：
- 若项目需更高兼容性，可搭配 JavaScript 动态设置高度（如监听
resize事件并更新style.height），但 CSS 方案已覆盖绝大多数场景； - 对于 iOS Safari，还可尝试
viewportmeta 标签增强控制：<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
配合
env(safe-area-inset-top)等环境变量进一步微调（适用于刘海屏适配）； - 测试时务必在真机上验证，模拟器可能无法准确复现地址栏动态行为。
综上，该方案以极简 CSS 实现跨端一致性：桌面端保持 100vh 的精准控制，移动端通过 @media (max-height: ...) 智能切换为 100%，兼顾语义清晰性与运行稳定性，是生产环境中推荐的轻量级响应式 Header 高度处理模式。
