如何阻止浏览器窗口缩放并禁用缩放时的Div重设大小功能

当然可行！我们可以通过区分浏览器缩放和窗口尺寸调整来实现这个需求——核心思路是检测页面缩放比例的变化，当检测到是缩放操作时，跳过div的重设尺寸逻辑即可。

具体实现步骤 #

1. 初始化时记录基准缩放参数
   在页面加载完成的ctlLoad函数中，记录初始的设备像素比（devicePixelRatio），这个值在浏览器缩放时会发生变化，而单纯调整窗口尺寸时通常保持稳定。

2. 修改doResize函数，添加缩放检测逻辑
   在每次触发resize事件时，对比当前的设备像素比和初始值，若差异超过可接受的误差范围，则判定为浏览器缩放操作，直接跳过div的重设尺寸逻辑；否则执行原有的resize逻辑。

完整代码示例 #

<body onresize="doResize();" onload="ctlLoad();">
  <!-- 你的页面内容 -->
  <div id="targetContainer"></div>
  <div id="livePlayerContainer"></div>

  <script>
    let initialDPR; // 保存初始设备像素比

    function ctlLoad() {
      // 初始化基准缩放参数
      initialDPR = window.devicePixelRatio;
      // 你的原有ctlLoad逻辑...
    }

    function doResize() {
      const currentDPR = window.devicePixelRatio;
      // 设置误差容忍度，避免浏览器精度问题导致误判
      const tolerance = 0.01;

      // 检测是否为浏览器缩放操作
      if (Math.abs(currentDPR - initialDPR) > tolerance) {
        return; // 跳过div重设尺寸操作
      }

      // 执行原有resize逻辑
      const objControl = document.getElementById("targetContainer");
      const container = document.getElementById("livePlayerContainer");
      // 你的原有doResize逻辑...
    }
  </script>
</body>

注意事项 #

• 兼容性：devicePixelRatio在现代主流浏览器（Chrome、Firefox、Edge、Safari）中都得到支持，基本能覆盖绝大多数场景。
• 误差容忍度：设置tolerance是为了避免浏览器计算精度问题导致的误判，比如某些浏览器缩放时像素比的微小变化。
• 特殊情况：极少数浏览器的缩放行为可能不改变devicePixelRatio，此时可以改用window.innerWidth / document.documentElement.clientWidth的比例来检测缩放变化，原理类似——初始时记录该比例，resize时对比即可。

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