1

I have a JavaScript application that moves a HTML widget based on the location of the mouse on the screen with a drag function. I use screenX and screenY to determine the mouse location as the mouse will move across other widgets (embedded HTML using the OBJECT tag) which will swallow the mouse events.

All works fine except when the end user with a high resolution screen sets their Windows font scaling resolution to something different to 100% (eg. common on modern laptops) then the mouse tracking ends up off by the factor of the screen resolution (consistent on all browsers), and the drag function fails. I can handle this by applying the same scale factor to the new X/Y coordinates for the widget Left and Top properties.

Here is the code (where winFontScale is the Windows setting for display font scale):

function mouseMove(event) {
     widgetObj.style.setProperty("left", event.screenX / winFontScale + "px");
     widgetObj.style.setProperty("top", event.screenY / winFontScale + "px");
}

However I don't think it is possible for JavaScript to detect the Windows font scaling setting? How have others been able to get around this problem of not being able to detect Windows font scaling to apply compensation?

deandob
  • 5,100
  • 5
  • 25
  • 37
  • https://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers – Asons Mar 17 '18 at 05:44

1 Answers1

0

LGSon, that link was helpful as browser zoom issues are similar to Windows desktop scaling browser issues.

As different browsers react differently to scaling, I had to add browser specific code, basically for IE and Edge adjust the left and top properties of the object being dragged by window.devicePixelRatio.

deandob
  • 5,100
  • 5
  • 25
  • 37