100vh在不同浏览器中表现不一致：chrome按初始视口计算，ios safari随地址栏收起动态变化，导致背景跳变或溢出；应结合min-height: 100vh、background-size: cover及js动态更新--vh变量来适配真实视口。
用 vh 和 vw 实现全屏背景最直接，但“全屏”常被误解为“撑满视口”，实际中容易因地址栏、滚动条、缩放行为导致高度计算偏差。
为什么 100vh 有时撑不满或溢出？
移动端 Safari 和部分 Android 浏览器在页面滚动时会动态调整 vh 值（比如地址栏收起后视口变高），导致背景高度跳变；桌面端若页面内容超出视口，100vh 仍按初始视口算，可能和滚动后视觉“全屏”不一致。
- Chrome Desktop：
100vh= 初始视口高度，不随滚动变化 - iOS Safari：
100vh= 当前可见视口高度，地址栏收起时值变大 - 存在横向滚动条时，
100vw包含滚动条宽度，可能造成右侧微小溢出
如何让背景真正“贴合用户当前看到的区域”？
优先用 height: 100vh + min-height: 100vh 组合，再配合 background-size: cover 和 background-attachment: fixed（慎用，iOS 有性能问题）。
-
min-height: 100vh防止内容少时背景塌缩 - 避免仅用
height: 100vh，否则内容超长时背景会被截断 - 若需背景随滚动“固定”，改用
background-attachment: scroll（默认值），更兼容 - 图片类背景务必设
background-position: center center，否则cover可能裁切关键区域
替代方案：当 vh 行为不可控时怎么办？
用 JavaScript 动态设置高度是最稳妥的兜底方式，尤其针对 iOS 地址栏反复出现/隐藏的场景。
function updateBgHeight() {
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
}
window.addEventListener('resize', updateBgHeight);
updateBgHeight();
然后在 CSS 中写：height: calc(var(--vh, 1vh) * 100);。这个技巧把运行时高度转成 CSS 自定义属性，绕过原生 vh 的不稳定行为。
真正难的不是写 100vh，而是判断你面对的是哪种“全屏”——是设计稿里的理想视口，还是用户手指滑动中不断变化的真实视口。后者必须接受动态适配，而不是依赖 CSS 单位的一次性声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
