如何处理CSS新单位dvh在低版本iOS系统上的回退方案？-css教程-PHP中文网

必须用@supports(min-height:100dvh)包裹整条规则且兜底min-height:100vh写在外层，因iOS15及更早系统完全忽略100dvh导致高度塌陷；错误写法如连续声明或仅包值会使旧设备失效、新设备仍走100vh。

如何处理css新单位dvh在低版本ios系统上的回退方案？

@supports 必须包裹整条规则，不能只包值

裸写 min-height: 100dvh 在 iOS 15 及更早系统中会直接被浏览器静默忽略，元素高度退化为 auto，页面视觉上“塌陷”成一条线。这不是报错，是规范行为：旧版 WKWebView 不识别 dvh 单位，整条 CSS 声明被丢弃。

错误写法：
min-height: 100vh;
min-height: 100dvh;
这样新 Safari 仍走 100vh，老 Safari 完全忽略第二行，问题照旧。

@supports 必须检测 min-height: 100dvh（不是 height），且包裹整个选择器块
兜底声明（min-height: 100vh）必须写在 @supports 外层，确保老环境至少有基础高度
优先用 min-height 而非 height，避免内容超长时被裁剪

JS fallback 要监听 resize + 首屏立即执行

当目标用户含大量 iOS 15.x 或微信 X5 内置浏览器时，@supports 降级后只剩 100vh，仍会因地址栏收起/键盘弹出导致高度错位。此时 JS 动态方案是唯一出路，但很多人监听 scroll，结果完全不更新——Safari 地址栏显隐只触发 resize，不发 scroll。

首次执行必须在 DOMContentLoaded 后立即运行，否则取到的是地址栏未收起时的错误初始 window.innerHeight
只监听 resize 即可（orientationchange 在部分 iOS 上不可靠）
用 requestAnimationFrame 节流，避免 iOS 连续触发多次 resize 导致卡顿
设 CSS 变量时，值必须是带 px 单位的数值，且是 window.innerHeight * 0.01（即 1% 高度），不是直接塞 vh

CSS 中 calc() 写法和 fallback 层级不能错

JS 设置了 --vh，但 CSS 里写错 calc() 就会失效。常见错误是把单位写进变量值里，或 fallback 用了相对单位——calc() 无法对 1vh 这类相对值做数学运算。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

JS 中： document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
CSS 中正确写法：min-height: calc(100 * var(--vh, 1px))（1px 是绝对单位兜底）
错误写法：calc(var(--vh, 1vh) * 100)（1vh 无法参与计算）
完整 fallback 链应为：min-height: 100vh; → @supports → min-height: calc(100 * var(--vh, 1px))