【前端】别再用100vh！移动端适配问题详解

带你彻底搞懂100vh在移动端的“坑”并介绍当下主流解决方案。不定期补充。目录问题原因解决方案最推荐100dvhvh / svh / lvh / dvh 到底是什么height 还是 min-height如果换成 100dvh 仍然有滚动条App / 后台类页面的标准写法不推荐再使用 JS 手算 --vh一个容易混淆的问题软键盘总结问题需求实现一个占满整个屏幕的欢迎页、弹窗蒙层或者一个 fixed 定位的底部菜单。直觉一上来就是height: 100vh问题然而100vh会超出屏幕高度带着烦人的滚动条原因基础知识vh(Viewport Height) 单位的定义1vh 等于视口高度的 1%。在PC端浏览器窗口大小是相对固定的所以100vh就是浏览器窗口的可见高度这没有问题。特殊但在移动端情况变得复杂。为了在有限屏幕空间里提供更好的浏览体验手机浏览器尤其是Safari和Chrome的地址栏和底部工具栏是动态变化的。初始状态当你刚进入页面时地址栏和工具栏是完全显示的。滚动时当你向下滚动页面这些UI元素会自动收缩甚至隐藏以腾出更多空间展示网页内容。关键大多数移动端浏览器将100vh定义为“最大视口高度”也就是当地址栏和工具栏完全收起时的高度。导致在页面初始加载、地址栏还未收起时100vh的实际计算高度 屏幕当前可见区域的高度-出现滚动条解决方案注意⚠️现代规范中 vh 等价于 lvh用这个还是会出现一样的问题方案写法优点缺点推荐度100dvhheight: 100dvh跟随当前动态可视区域变化最符合“铺满当前屏幕”地址栏动画时高度可能持续变化引发布局抖动⭐⭐⭐⭐⭐100svhheight: 100svh使用最小视口高度不会被浏览器工具栏遮挡工具栏收起后底部可能留空⭐⭐⭐⭐JS CSS 变量--vh: innerHeight * 0.01px可精确控制、兼容老浏览器需要 JS、监听 resize、复杂度高⭐⭐⭐-webkit-fill-availablemin-height: -webkit-fill-available老 Safari 的历史兼容方案非现代标准主方案行为不够统一⭐⭐最推荐100dvh.page{min-height:100dvh;}dvhDynamic Viewport Height动态视口高度跟随移动端当前实际视口变化。地址栏展开100dvh ≈ 当前较小可见区域地址栏收起100dvh ≈ 扩大后的可见区域工程中直接这样写html, body, #app{margin:0;min-height:100%;}.page{min-height:100vh;min-height:100dvh;}前面的100vh是旧浏览器 fallback 兜底策略。支持dvh的现代浏览器会用后面的min-height: 100dvh;dvh已支持 Safari 15.4、Firefox 101、Chrome 108 及后续版本因此现代 Web 项目通常已经可以直接使用。除非老手机没升级系统vh / svh / lvh / dvh到底是什么单位代表什么移动端行为常见用途100vh默认视口高度100 lvh现代规范等价于100lvh通常按最大视口算不推荐作为移动端严格满屏高度100svhSmall Viewport Height地址栏展开时的小视口要保证内容永远不被浏览器 UI 挡住100lvhLarge Viewport Height地址栏收起后的大视口明确需要最大视口时100dvhDynamic Viewport Height随地址栏展开/收起动态变化正常移动端满屏布局首选可以直接记svh 最小视口 dvh 当前视口 lvh 最大视口 svh ≤ dvh ≤ lvhheight还是min-height普通页面优先.page{min-height:100dvh;}因为内容超过一屏时应该允许页面自然增长内容不足一屏 → 至少撑满屏幕 内容超过一屏 → 页面继续增长如果写.page{height:100dvh;}就是在强制容器高度 一屏。内容过多时可能发生内部溢出。所以通常/* 页面 */min-height:100dvh;/* 明确固定为一屏的 App Shell / 弹窗 / 工作台 */height:100dvh;如果换成100dvh仍然有滚动条那问题很可能已经不是 viewport unit而是盒模型。设置body默认margin:0因为浏览器默认通常margin: 8px;100dvh body 上下 margin→ 页面 一屏→ 出现滚动body{margin:0;}100dvh padding默认box-sizing: content-box;导致实际高度超出一页.page{height:100dvh;padding:20px;}推荐全局border-box使得height content padding borderpadding会包含在100dvh内。*, *::before, *::after{box-sizing:border-box;}Header 又额外加了一遍错误header{height:60px;}main{height:100dvh;}总高度60px 100dvh必然超过一屏。应改为main{height:calc(100dvh - 60px);}更推荐直接 Flex.page{height:100dvh;display:flex;flex-direction:column;}header{flex:none;}main{flex:1;min-height:0;overflow:auto;}App / 后台类页面的标准写法html, body, #app{width:100%;height:100%;margin:0;}*, *::before, *::after{box-sizing:border-box;}.app{height:100dvh;display:flex;flex-direction:column;overflow:hidden;}.header{flex:none;}.main{flex:1;min-height:0;overflow:auto;}数据流可以理解成100dvh → App 占据当前可见视口 → Header 占固定空间 → Main flex: 1 吃掉剩余空间 → min-height: 0 允许 Main 收缩 → overflow: auto 让 Main 滚动 → 外层页面不产生额外滚动条min-height: 0在这里非常重要Flex 子项默认存在自动最小尺寸约束内容较多时可能拒绝继续缩小最终把父容器撑破。不推荐再使用 JS 手算--vh以前常见constsetVh(){document.documentElement.style.setProperty(--vh,${window.innerHeight*0.01}px);};setVh();window.addEventListener(resize,setVh);.page{height:calc(var(--vh)* 100);}这是dvh普及前用于绕过移动浏览器100vh问题的 hack。JS 方案只在你需要处理非常老的浏览器或者有特殊VisualViewport/ 键盘交互要求时再考虑。一个容易混淆的问题软键盘100dvh并不能统一解决所有移动端软键盘问题。浏览器虚拟键盘和地址栏并不是完全相同的 viewport UI不同浏览器、不同配置下键盘可能 resize viewport也可能 overlay 内容。web.dev 也明确指出虚拟键盘并不天然作为这些动态浏览器工具栏的一部分处理。所以输入框被软键盘遮挡→ 可能还需要 VisualViewport / VirtualKeyboard API / scrollIntoView 等单独处理总结移动端满屏min-height:100dvh;固定一屏 Appheight:100dvh;页面框架html, body, #app{margin:0;}*{box-sizing:border-box;}