寻求CSS新尺寸单位dvh、dvw的旧浏览器兼容Polyfill方案

CSS降级（基础兼容） #

如果不需要完全模拟动态视口的实时响应，先给旧浏览器提供vh/vw作为 fallback，再用@supports检测支持dvh/dvw的浏览器，覆盖样式：

/* 旧浏览器 fallback */
.target-element {
  height: 100vh;
  width: 100vw;
}

/* 支持dvh/dvw的浏览器使用新单位 */
@supports (height: 100dvh) {
  .target-element {
    height: 100dvh;
    width: 100dvw;
  }
}

这种方式简单高效，旧浏览器至少能获得基础的视口适配，只是不会响应地址栏/工具栏的动态变化。

JS Polyfill（完全模拟动态视口） #

如果需要和dvh/dvw完全一致的动态效果（即地址栏收起/展开时自动更新尺寸），可以通过JS计算实时视口大小，结合CSS变量实现：

1. 先在CSS中定义变量，同时保留fallback：

:root {
  --dvh: 1vh;
  --dvw: 1vw;
}

.target-element {
  height: calc(var(--dvh) * 100);
  width: calc(var(--dvw) * 100);
}

2. 编写JS计算并更新动态视口尺寸：

// 计算并设置动态视口变量
function updateDynamicViewport() {
  // window.innerHeight/innerWidth 是当前可见的视口尺寸，会随地址栏变化
  const dvhUnit = window.innerHeight * 0.01;
  const dvwUnit = window.innerWidth * 0.01;
  document.documentElement.style.setProperty('--dvh', `${dvhUnit}px`);
  document.documentElement.style.setProperty('--dvw', `${dvwUnit}px`);
}

// 初始化执行
updateDynamicViewport();

// 监听窗口变化和滚动（移动设备地址栏变化会触发这些事件）
window.addEventListener('resize', updateDynamicViewport);
window.addEventListener('scroll', updateDynamicViewport);

3. 优化性能（防抖处理）：
   频繁触发scroll/resize会导致重绘，加个防抖函数减少执行频率：

function debounce(func, delay = 100) {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

// 使用防抖后的更新函数
const debouncedUpdate = debounce(updateDynamicViewport);
window.addEventListener('resize', debouncedUpdate);
window.addEventListener('scroll', debouncedUpdate);

关键提示 #

• 优先使用CSS @supports降级方案，JS仅作为需要完全动态响应时的补充，避免给支持新单位的浏览器增加额外负担
• 防抖函数的延迟可以根据实际需求调整，平衡响应速度和性能
• 对于不需要实时响应地址栏变化的场景，只用vh/vw fallback就足够，无需引入JS

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