@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 的兼容替代品，三者语义完全不同，强行替换会导致布局错位。
-
100svh= 地址栏**强制显示时**的最小高度，适合支付确认按钮这类“绝不能被遮挡”的元素 -
100lvh= 地址栏**强制隐藏时**的最大高度，适合全屏视频，但滚动初期顶部可能被盖住 -
100dvh= 当前**实时可视区域高度**，才是100vh的合理升级目标 - 如果同时用到多个单位，必须分别写独立的
@supports块，比如@supports (min-height: 100dvh)和@supports (min-height: 100svh)不能合并
绝对定位元素用dvh容易失效
给 position: absolute 元素设 min-height: 100dvh 常常没反应，不是单位问题，而是包含块没高度。
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
立即学习“前端免费学习笔记（深入）”；
- 绝对定位元素的百分比高度依赖父容器的显式高度；若父容器是
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 是标准解，但落地时得接受它只在部分场景真正可用。
