用100dvh替代100vh并配合@supports降级，或JS监听resize/scroll动态设置height，或CSS flex+min-height:100vh兜底。
首屏内容被截断，height: 100vh 在 iOS Safari 失效怎么办
移动端首屏显示不全，最常见原因是 100vh 在 iOS Safari（尤其是 Safari 15+）中会把地址栏高度算进视口，导致实际可用高度小于预期，内容被底部遮挡或顶部留白异常。这不是 CSS 写错了，而是浏览器对 vh 单位的实现差异。
- Android Chrome 和新版 Edge 基本正常；iOS Safari（含微信内置浏览器）在页面滚动后地址栏收起，
100vh却不会动态重算 -
min-height: 100vh同样无效——它只是“至少”撑满，但初始渲染仍按错误高度计算 - 用
100dvh是最直接解法，但需注意兼容性：Safari 16.4+、Chrome 105+ 才支持
用 dvh 替代 vh，但必须加降级逻辑
dvh（dynamic viewport height）是为解决这个问题引入的新单位，它始终反映当前可见视口高度（含地址栏展开/收起状态）。但不能无条件替换，得兜底。
section.hero {
/* 主力：动态视口高度 */
height: 100dvh;
/* 降级：旧浏览器 fallback 到 100vh */
height: 100vh;
/* 防止 dvh 不支持时被覆盖，用 @supports 控制 */
}
@supports (height: 100dvh) {
section.hero {
height: 100dvh;
}
}
- 必须用
@supports包裹100dvh声明，否则老浏览器会忽略整条规则（CSS 解析失败） - 不要写成
height: 100vh; height: 100dvh;连续赋值——后者会被前者覆盖（老浏览器不认识dvh，但会跳过该声明，保留vh） - 如果项目需支持 Safari 15.x 或更低，
dvh无法使用，得换 JS 方案
JS 动态设置高度：监听 resize 和 scroll 并防抖
当 dvh 不可用时，手动读取 window.innerHeight 并写入内联样式是最稳妥的降级方式。但要注意触发时机和性能陷阱。
function updateHeroHeight() {
const hero = document.querySelector('.hero');
if (!hero) return;
hero.style.height = window.innerHeight + 'px';
}
// 初始化
updateHeroHeight();
// resize 会触发（如横竖屏切换），但 scroll 也要监听——iOS 地址栏收起时只触发 scroll
window.addEventListener('resize', updateHeroHeight);
window.addEventListener('scroll', () => {
// 防抖：避免滚动中高频执行
clearTimeout(window.debounceTimer);
window.debounceTimer = setTimeout(updateHeroHeight, 50);
});
- 仅靠
resize不够：iOS Safari 地址栏收起/展开时，resize不触发，但scroll会 - 必须加防抖，否则快速滚动时反复重设高度会导致布局抖动甚至卡顿
- 不要在
DOMContentLoaded里只设一次——此时地址栏可能还没收起，高度仍是错的
更轻量的 CSS-only 降级：min-height + flex 布局撑满
如果首屏内容结构简单（比如一个标题+按钮），不用严格“填满”，而是确保内容始终可见且居中，可绕开高度计算问题。
立即学习“前端免费学习笔记（深入）”；
body, html {
margin: 0;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
padding: 2rem;
}
/ 内容自身不设 height，靠 flex 容器撑开 /
.hero-content {
text-align: center;
}
-
min-height: 100vh在这里安全，因为不依赖精确高度，只保证“至少一页”，多余空间由 flex 分配 - 避免给
.hero-content设height或position: absolute，否则会脱离文档流，flex 失效 - 此方案对「首屏必须严丝合缝」的场景不适用（比如全屏视频背景），但对大多数营销页足够健壮
真正麻烦的是混合场景：既要全屏视觉效果，又要兼容老 iOS，还不能引入 JS。这时候得接受妥协——比如用媒体查询粗略判断设备类型，或把关键操作按钮固定在底部避开截断区。高度控制看着小，实则牵扯浏览器行为、用户交互节奏和降级成本，别指望一行 CSS 解决所有。
