@supports必须包裹整条规则,不能只包值;100dvh需单独用@supports检测,兜底100vh须写在外层;svh/lvh语义不同,不可混用作dvh降级;absolute元素用dvh需确保包含块有显式高度;ios 15等旧环境必须用js监听resize动态设置--vh变量。

@supports必须包裹整条规则,不能只包值
直接写 min-height: 100vh; min-height: 100dvh; 是无效的——旧版 Safari、微信 WebView 会忽略 100dvh 这一行,但不会报错,而是直接跳过整条声明,最终只生效 100vh,问题照旧。
正确做法是把 100dvh 规则完全隔离在 @supports 块里:
-
@supports必须检测min-height: 100dvh(不是height,height不支持 dvh) - 兜底的
min-height: 100vh一定要写在@supports外面,确保 iOS 15、微信等环境至少有基础高度 - 别用
@supports (min-height: 100dvh), (min-height: 100svh)这种多条件写法——它是“与”关系,任一不支持就整个块失效
svh/lvh不能当dvh的降级方案混用
100svh 和 100lvh 不是 100dvh 的兼容替代品,三者语义完全不同,强行替换会导致布局错位。
用于 inference.sh 的 JavaScript/TypeScript SDK,可运行 AI 应用、构建代理、集成 150+ 模型。包名:@inferencesh/sdk(npm install),完整 TypeScript 支持。
-
100svh= 地址栏**强制显示时**的最小高度,适合支付确认按钮这类“绝不能被遮挡”的元素 -
100lvh= 地址栏**强制隐藏时**的最大高度,适合全屏视频,但滚动初期顶部可能被盖住 -
100dvh= 当前**实时可视区域高度**,才是100vh的合理升级目标 - 如果同时用到多个单位,必须分别写独立的
@supports块,比如@supports (min-height: 100dvh)和@supports (min-height: 100svh)不能合并
绝对定位元素用dvh容易失效
给 position: absolute 元素设 min-height: 100dvh 常常没反应,不是单位问题,而是包含块没高度。
- 绝对定位元素的百分比高度依赖父容器的显式高度;若父容器是
body或div且没设高,100dvh实际计算为0 - 更稳妥的写法是不用高度,改用
top: 0; bottom: 0;,直接撑满可视区域 - 如果必须用
100dvh,得确保最近的相对定位祖先有min-height: 100dvh或height: 100%,且html、body都设了height: 100% - 注意
bottom: 0会覆盖刘海/小黑条,需加padding-bottom: env(safe-area-inset-bottom)
iOS 15 及更早必须 fallback 到 JS
仅靠 CSS 无法覆盖 iOS 15、微信 WebView、QQ 浏览器等真实存量环境——它们压根不识别 dvh,@supports 检测也返回 false,页面直接塌陷。
- JS 方案核心:监听
resize事件(iOS 地址栏切换会触发),用window.innerHeight动态更新--vh变量 - 初始值必须在
DOMContentLoaded后立刻设置一次,否则首屏渲染取的是地址栏未收起时的错误高度 - CSS 中统一用
min-height: calc(var(--vh, 1vh) * 100),其中1vh是降级兜底,避免 JS 未执行时完全失控 - 别在
scroll中更新--vh,resize已足够;节流不是可选,是必须,否则安卓部分机型会高频触发
真正麻烦的不是写法,而是不同环境对「当前可视高度」的理解差异——dvh 是标准解,但落地时得接受它只在部分场景真正可用。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










