Merge remote-tracking branch 'origin/master'

zhoushihao

2025-04-17 81c432dc393520e3ed2e408035455837c56840af

 UI-Project/src/utils/evicePixelRatio.js

@@ -1,57 +1,53 @@
/**
 * @description 校正windows页面在系统进行缩放后导致页面被放大的问题，通常放大比例是125%、150%
 * **/

class DevicePixelRatio {
   constructor() {
     this.bodyElement = document.getElementsByTagName('body')[0]; // 缓存 body 元素
   }

   //获取系统类型
   _getSystem() {
      let flag = false;
      var agent = navigator.userAgent.toLowerCase();
      if (agent.indexOf("windows") >= 0) {
         return true;
      }
  
   // 判断是否为 Windows 系统
   isWindowsSystem() {
     const agent = navigator.userAgent.toLowerCase();
     return agent.indexOf("windows") >= 0;
   }

   //获取页面缩放比例
   _addHandler(element, type, handler) {
      if (element.addEventListener) {
         element.addEventListener(type, handler, false);
      } else if (element.attachEvent) {
         element.attachEvent("on" + type, handler);
      } else {
         element["on" + type] = handler;
      }
  
   // 通用事件绑定工具
   addHandler(element, type, handler) {
     if (element.addEventListener) {
      element.addEventListener(type, handler, false);
     } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
     } else {
      element["on" + type] = handler;
     }
   }

   //校正浏览器缩放比例
   _correct() {
      let t = this;
      //页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
      document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;
  
   // 校正浏览器缩放比例
   correctZoom() {
     if (this.bodyElement) {
      // 使用 1 / window.devicePixelRatio 来调整 zoom
      this.bodyElement.style.zoom = 1 / window.devicePixelRatio;
     }
   }

   //监听页面缩放
   _watch() {
      let t = this;
      t._addHandler(window, 'resize', function () { //注意这个方法是解决全局有两个window.resize
         //重新校正
         t._correct()
      })
  
   // 监听页面缩放（使用防抖优化）
   watchResize() {
     let timer = null;
     this.addHandler(window, 'resize', () => {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        this.correctZoom();
      }, 200); // 延迟 200ms 执行，避免频繁触发
     });
   }

   //初始化页面比例
  
   // 初始化页面比例校正
   init() {
      let t = this;
      if (t._getSystem()) { //判断设备，目前只在windows系统下校正浏览器缩放比例
         //初始化页面校正浏览器缩放比例
         t._correct();
         //开启监听页面缩放
         t._watch();
      }
     if (this.isWindowsSystem()) {
      // 初始化校正
      this.correctZoom();
      // 开启监听
      this.watchResize();
     }
   }
}

export default DevicePixelRatio;
  }
  
  export default DevicePixelRatio;