CSS中max-height同时设为100vh与100dvh是否合理？求解析

这不是笔误，是标准的浏览器兼容回退写法。

原理说明 #

CSS的规则是：如果浏览器能识别后面的属性值，就会覆盖前面的；如果识别不了，就会忽略后面的，沿用前面的有效值。

• 100vh是传统视口单位，基于浏览器的可视区域高度，但在移动端会被地址栏、工具栏等挤占，导致实际可用高度小于预期；
• 100dvh是动态视口单位，会自动排除浏览器UI（如地址栏、底部导航栏）的占用，始终匹配当前页面的实际可用可视高度。

所以这段代码的逻辑是：

• 不支持dvh的旧浏览器，会使用100vh作为回退；
• 支持dvh的现代浏览器，会使用100dvh，实现更精准的视口高度适配。

适用场景 #

• 移动端页面需要全屏容器（比如弹窗、沉浸式页面、全屏表单），避免浏览器UI遮挡内容或导致容器高度超出可视区域；
• 适配多设备的响应式页面，同时兼顾旧浏览器兼容性和现代设备的精准视口体验；
• 需要容器高度严格匹配当前可用视口高度的场景，比如视频播放器、全屏画布等。

内容的提问来源于stack exchange，提问作者Philipp Panik