100vh在移动端不可靠，因Safari和部分安卓浏览器地址栏动态变化时其值不更新，导致布局异常；推荐用100dvh（配合@supports降级）、flex布局或JS动态设置高度。
手机浏览器中使用 100vh 会导致页面高度异常，主要是因为 Safari（iOS）和部分安卓浏览器在地址栏显示/收起时会动态调整视口高度，但 100vh 并不会实时响应这种变化，造成内容被截断、留白或滚动错位。
为什么 100vh 在移动端不可靠
移动浏览器的「视口」（viewport）高度并非固定值。例如：用户下拉刷新、点击输入框唤出软键盘、或地址栏自动隐藏时，浏览器会临时扩大可用视口区域，此时 100vh 仍按初始高度计算，导致布局失真。iOS Safari 尤其明显——首次加载可能显示正常，一旦交互后就出问题。
用 vh 单位的替代方案
-
用
100%配合 flex 布局：让容器继承父级高度，再用display: flex; flex-direction: column;控制子元素伸缩，更稳定可靠 -
用
min-height: 100dvh（推荐）：dvh是「动态视口单位」，Chrome 105+、Safari 16.4+、Firefox 110+ 已支持，能响应地址栏变化；可搭配@supports回退 -
JavaScript 动态设置高度：监听
resize或orientationchange，用document.documentElement.clientHeight更新自定义 CSS 变量，再在样式中引用
实际写法示例
安全写法（含降级）：
:root {
--full-height: 100vh;
}
@supports (height: 100dvh) {
:root {
--full-height: 100dvh;
}
}
.full-screen {
height: var(--full-height);
}
配合 JS 补充兼容旧版 iOS：
立即学习“前端免费学习笔记（深入）”；
function updateDvh() {
document.documentElement.style.setProperty('--full-height', `${window.innerHeight}px`);
}
window.addEventListener('resize', updateDvh);
updateDvh(); // 初始化
其他容易忽略的细节
- 避免对
html或body直接设height: 100vh，易引发滚动链路异常 - 使用
viewportmeta 标签时，慎用height=device-height，它已被多数浏览器忽略且无实际效果 - 若需全屏滚动（如 Lander 页），优先考虑
scroll-snap-type+ 自然文档流，而非强行撑高容器
