必须用@supports(min-height:100dvh)包裹整条规则并外置min-height:100vh兜底，因ios15、微信x5等旧环境完全忽略100dvh导致高度塌陷；100svh/100lvh为静态锚点值，不适用于动态视口场景。

直接写 100dvh 会炸，必须用 @supports 隔离

写了 min-height: 100dvh 却发现老设备页面“缩成一团”？因为 iOS 15、微信内置浏览器（基于旧版 WKWebView）、部分安卓 WebView 完全不识别 dvh，整条 CSS 声明被丢弃，退回到无高度控制状态。

正确做法是把兜底写在 @supports 外层：

.full { min-height: 100vh; }
@supports (min-height: 100dvh) {
  .full { min-height: 100dvh; }
}

• @supports 必须检测 min-height: 100dvh，不是 height: 100dvh（规范不支持 height 用 dvh）
• 别把 100dvh 和 100svh 写在同一规则里——Safari 会整条忽略
• min-height 比 height 更安全：内容少时不塌陷，内容多时不截断

100svh 不是 100dvh 的备选，它只适合固定避让场景

看到 100svh 就想拿来替换 100vh 解决滚动遮挡？错。它表示“地址栏和工具栏都强制展开时的最小可视高度”，是个固定值，不随滚动变化。

典型误用：height: 100svh 做轮播图容器 → 下拉后地址栏收起，实际可视区域变大，但容器卡在最小高度，底部大面积留白。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 真正适用场景：支付页底部按钮、弹窗确认区等「宁可留空、不能被盖」的固定元素
• 正确写法不是 height: 100svh，而是结合 env(safe-area-inset-bottom) 做 padding 避让
• Safari 直到 v17.4 才支持 svh，Chrome 115+、Firefox 119+ 起步，覆盖率有限

别监听 scroll 更新视口高度，iOS 地址栏显隐触发的是 resize

CSS 方案在微信、iOS 15 等环境完全失效时，JS fallback 是唯一出路。但很多人监听 scroll，结果高度永远不更新——因为 Safari 地址栏收起/展开不发 scroll，只发 resize。

• 必须监听 resize（以及 orientationchange，横竖屏切换可能改变视口）
• 首次执行要放在 DOM ready 后，否则取到的 window.innerHeight 可能不准
• 用 requestAnimationFrame 节流，避免高频 resize 导致卡顿
• 设 CSS 变量如 --dvh: ${innerHeight}px，再在 CSS 中用 min-height: var(--dvh)

100dvh 和 100lvh 别混用，语义和计算逻辑完全不同

有人以为 lvh 是“更大的 dvh”，其实它是静态最大值：地址栏强制隐藏时的理论上限。首次加载时如果地址栏还开着，100lvh 容器可能直接被顶部遮住。

• 100dvh = 当前实时可视高度（滚动时动态变）
• 100svh = 最小锚点高度（保守，不变化）
• 100lvh = 最大锚点高度（激进，不变化）
• 混用如 padding-bottom: 20svh; min-height: 100dvh，基准不同，结果不可控

最易被忽略的一点：所有新单位都只在 min-height、max-height、inset 等属性中受支持，height 属性上写 100dvh 在多数浏览器里等于没写。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！