如何实现网页放大时div同步放大，且支持浏览器窗口自适应调整尺寸

算力阿峰

2026-9-27

问题原因

你当前代码的问题根源是vw/vh属于相对视口逻辑像素的单位：浏览器放大时，逻辑视口的宽高会同步缩小，calc(100vw - 30px)永远等于当前视口宽度减30px，所以div始终不会超出视口。而固定px单位的元素不受逻辑视口缩放影响，放大时物理尺寸会同步变大，自然会溢出视口。

解决方案

我们可以通过JS监听浏览器窗口物理尺寸变化，动态给div设置固定px宽高，既满足窗口大小调整时的自适应需求，也能实现页面缩放时div同步放大溢出的效果，代码如下：

CSS代码

#container {
  background-color: crimson;
}

HTML代码

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="Test.css">
</head>
<body>
  <div id="container"></div>
  <script>
    // 记录上一次窗口物理尺寸，排除缩放触发的resize事件
    let lastOuterWidth = window.outerWidth;
    let lastOuterHeight = window.outerHeight;

    function resizeContainer() {
      // 仅当窗口物理尺寸变化时更新div尺寸
      if (window.outerWidth !== lastOuterWidth || window.outerHeight !== lastOuterHeight) {
        const viewWidth = window.innerWidth;
        const viewHeight = window.innerHeight;
        document.getElementById('container').style.cssText = `
          width: ${viewWidth - 30}px;
          height: ${viewHeight - 30}px;
        `;
        lastOuterWidth = window.outerWidth;
        lastOuterHeight = window.outerHeight;
      }
    }

    // 页面初始化时适配窗口尺寸
    resizeContainer();
    // 监听窗口大小变化事件
    window.addEventListener('resize', resizeContainer);
  </script>
</body>