JavaScript处理Windows非100%显示缩放导致的鼠标追踪异常

我之前做拖拽功能时也踩过这个坑！问题根源在于Windows的字体缩放（比如125%、150%）会让浏览器的物理屏幕像素和页面的CSS像素产生缩放差，而你用的screenX/Y是基于物理屏幕的像素值，直接用来定位CSS像素的元素，自然会出现追踪偏移。

为什么会异常？ #

当系统开启非100%字体缩放时，浏览器会自动调整页面的渲染比例——比如125%缩放时，1个CSS像素会对应1.25个物理屏幕像素。你直接用screenX/Y（物理像素）来设置元素的left/top（CSS像素），相当于把鼠标移动的物理像素直接当成了CSS像素，导致元素移动的距离和鼠标实际移动的距离不匹配，看起来就是追踪异常。

解决方案：把screen坐标转换为CSS像素坐标 #

核心思路是先获取当前的浏览器缩放比例，再用这个比例把screenX/Y转换为对应的CSS像素值，具体步骤如下：

1. 获取当前缩放比例
   可以通过页面的视口宽度计算缩放比例，这个比例会自动匹配Windows的字体缩放设置：

   function getZoomRatio() {
     // innerWidth是物理屏幕像素的视口宽度，clientWidth是CSS像素的视口宽度
     return window.innerWidth / document.documentElement.clientWidth;
   }
   

2. 在拖拽逻辑中应用缩放转换
   调整你的拖拽代码，加入缩放转换逻辑：

   let startScreenX, startScreenY;
   let startLeft, startTop;
   let currentZoomRatio = getZoomRatio();
   
   dragElement.addEventListener('mousedown', (e) => {
     startScreenX = e.screenX;
     startScreenY = e.screenY;
     startLeft = parseFloat(dragElement.style.left) || 0;
     startTop = parseFloat(dragElement.style.top) || 0;
     document.addEventListener('mousemove', handleDrag);
   });
   
   function handleDrag(e) {
     // 把物理屏幕的坐标差转换为CSS像素的坐标差
     const deltaX = (e.screenX - startScreenX) / currentZoomRatio;
     const deltaY = (e.screenY - startScreenY) / currentZoomRatio;
     dragElement.style.left = startLeft + deltaX + 'px';
     dragElement.style.top = startTop + deltaY + 'px';
   }
   

3. 监听缩放变化，实时更新比例
   如果用户中途调整Windows字体缩放或者浏览器窗口，缩放比例会变化，所以要监听相关事件：

   // 窗口大小变化时更新比例
   window.addEventListener('resize', () => {
     currentZoomRatio = getZoomRatio();
   });
   
   // 针对现代浏览器的视口缩放变化
   window.visualViewport?.addEventListener('resize', () => {
     currentZoomRatio = getZoomRatio();
   });
   

额外小提示 #

如果你的OBJECT标签不需要交互，可以试试给它加pointer-events: none样式——这样鼠标事件就不会被它吞掉，你就能用pageX/Y或者clientX/Y来做拖拽，这些坐标本身就是基于CSS像素的，不用额外转换，会更省心~

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