如何让getBoundingClientRect()适配Windows屏幕缩放比例？

问题场景 #

使用以下JS代码获取元素位置：

document.getElementById('my-element').getBoundingClientRect();

返回结果示例：

DOMRect : {
  x: 1406, 
  y: 356.3999938964844, 
  width: 52, 
  height: 52, 
  top: 356.3999938964844,
  …
}

在Windows 11的Chrome浏览器中，系统显示缩放比例为100%时该代码正常工作，但高分辨率显示器常用更大缩放比例（如125%、150%）时，返回的坐标无法匹配元素真实屏幕位置。

解决方案 #

核心原因是getBoundingClientRect()返回的是CSS像素，而Windows系统缩放会改变物理像素与CSS像素的映射比例。我们可以通过window.devicePixelRatio获取当前设备的像素比，将CSS像素转换为真实物理屏幕像素：

具体实现代码 #

const element = document.getElementById('my-element');
const rect = element.getBoundingClientRect();
// 获取当前设备的像素比（对应系统缩放比例，如125%缩放对应1.25）
const pixelRatio = window.devicePixelRatio;

// 转换为真实屏幕物理坐标
const realPosition = {
  x: rect.x * pixelRatio,
  y: rect.y * pixelRatio,
  width: rect.width * pixelRatio,
  height: rect.height * pixelRatio,
  top: rect.top * pixelRatio,
  left: rect.left * pixelRatio,
  bottom: rect.bottom * pixelRatio,
  right: rect.right * pixelRatio
};

console.log(realPosition);

原理说明 #

• window.devicePixelRatio表示物理像素与CSS像素的比值，Windows系统的显示缩放比例会直接影响这个值：比如100%缩放对应1，125%对应1.25，150%对应1.5。
• 将getBoundingClientRect()返回的所有CSS像素值乘以该比值，就能得到元素在屏幕上的真实物理坐标，适配任意系统缩放比例。

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