如何在网页中适配Windows 10全局缩放修正鼠标坐标？

Great question—this is a super frustrating gotcha when working with mouse input on high-DPI or scaled Windows systems. Hardcoding a scale factor like 1.25 works for your specific setup, but it’s not sustainable across different user configurations. Here are two far more robust solutions:

1. Use window.devicePixelRatio for Automatic Scaling Correction #

The browser provides window.devicePixelRatio which directly reflects the system’s global scaling factor (e.g., 1.25 for 125%, 1.5 for 150%, etc.). This eliminates the need to guess or hardcode values.

Here’s how to update your calculation:

// Get the system's current scaling factor automatically
const scale = window.devicePixelRatio;

// Calculate normalized coordinates with scaling correction
MousePos.x = ((event.clientX * scale - Renderer.domElement.offsetLeft) / Renderer.domElement.width) * 2 - 1;
MousePos.y = -((event.clientY * scale - Renderer.domElement.offsetTop) / Renderer.domElement.height) * 2 + 1;

This will dynamically adjust to whatever scaling the user has set, so your normalization stays accurate across all environments.

2. Combine with getBoundingClientRect() for Precise Element Positioning #

If your renderer element has any CSS transforms, positioning, or is nested in scrollable containers, offsetLeft/offsetTop might not give you the most accurate position. Instead, use getBoundingClientRect() to get the element’s exact position relative to the viewport:

const scale = window.devicePixelRatio;
const elementRect = Renderer.domElement.getBoundingClientRect();

// Calculate position relative to the element's top-left corner
const relativeX = (event.clientX * scale) - elementRect.left;
const relativeY = (event.clientY * scale) - elementRect.top;

// Normalize as before
MousePos.x = (relativeX / elementRect.width) * 2 - 1;
MousePos.y = -(relativeY / elementRect.height) * 2 + 1;

getBoundingClientRect() returns updated values even if the element moves or the window resizes, making this approach more reliable for complex UIs.

Bonus: If You’re Using a 3D Library Like Three.js #

If your Renderer is a Three.js WebGLRenderer, know that the library’s built-in controls (like OrbitControls or PointerLockControls) already handle scaling corrections under the hood. If you’re rolling your own input handling, the above methods are still the way to go.

Why These Are Better Than Hardcoding #

• Adaptability: They work for any system scaling factor, not just your test setup.
• Accuracy: getBoundingClientRect() accounts for dynamic layout changes that offsetLeft/offsetTop miss.
• Maintainability: No need to update hardcoded values if users change their scaling settings.

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