100vh 在 iOS Safari 中“不够高”是因为其基于初始布局视口且不响应地址栏动态变化；应优先使用 height: env(height) 并 fallback 到 -webkit-fill-available 和 100vh，复杂场景需 JS 监听 visualViewport 实时同步。
为什么 100vh 在 iOS Safari 里经常“不够高”
因为 iOS Safari 的地址栏会动态收起/展开，导致视口高度变化，但 vh 单位在页面加载时就已计算并固化，后续不响应滚动时的视口变化。这不是 bug，是规范行为——vh 基于初始布局视口（layout viewport），而非视觉视口（visual viewport）。
- 真机调试时，下拉刷新或滚动到底部后，
100vh元素可能被截断或留白 -
100vh在微信内置浏览器、部分安卓 WebView 中也有类似表现 - 用
height: 100vh做全屏轮播或登录页背景，容易出现底部露白或内容溢出
用 env() + constant() 补齐 iOS 安全区域与动态视口
iOS 11+ 提供了 env(safe-area-inset-bottom) 和 env(height)，后者能响应视觉视口变化；旧版 iOS 则需降级 fallback。注意：constant() 已废弃，仅作兼容。
- 优先使用
height: env(height)替代100vh，它随地址栏隐藏实时更新 - 搭配
padding-bottom: env(safe-area-inset-bottom)防止内容被刘海/Home Indicator 遮挡 - 必须加 fallback：
height: 100vh; height: -webkit-fill-available;（后者在 Safari 中等效于可用视口高度）
body {
height: 100vh;
height: -webkit-fill-available;
height: env(height);
}
vh 和 vw 在缩放、横屏、强制字体放大时的行为差异
vh/vw 基于 CSS 像素，不受用户缩放（pinch-zoom）影响，但受设备方向和系统字体设置干扰。例如：开启“更大字体”辅助功能后，某些安卓机型会重算视口尺寸，导致 100vh 突然变小。
- 横屏切换时，
100vh指向当前屏幕的“高”，不是初始方向的高——这点常被误认为错乱 - PC 端 Chrome 开启“强制网页使用我的字体大小”后，
vh不变，但文字撑开容器，可能引发溢出 - 不要用
vw控制字体大小做响应式（如font-size: 4vw），小屏下易过小，大屏下易过大；改用clamp()更可控
真正可靠的全屏方案：CSS 自定义属性 + JS 监听 resize
当设计要求“绝对贴边、不留空、不滚动”，纯 CSS 的 vh/vw 就不够用了。必须用 JS 获取 visualViewport.height 并同步到 CSS 变量——这是目前唯一能 100% 对齐视觉视口的方法。
- 监听
visualviewport事件比resize更精准，尤其在 iOS 地址栏动画过程中 - 务必节流，避免高频触发样式重算；推荐用
requestAnimationFrame批处理 - 服务端渲染（SSR）场景下，首次渲染仍需 fallback 到
100vh，JS 注入后再修正
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
window.addEventListener('resize', () => {
vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
然后在 CSS 中写 height: calc(var(--vh, 1vh) * 100)。
复杂点不在写法，在于要同时处理 iOS 动态视口、Android 辅助功能、PC 缩放、SSR 首屏一致性——漏掉任意一环，全屏就“差那么一点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
