I have recently added DPI scaling to a project to ensure the UI elements in the project (drawn with canvas) are a reasonably consistent size across devices. This seemed to work at first, but a day after adding the code, I am suddenly getting massive UI elements on my 4k laptop. My high DPI mobile device and normal DPI desktop monitor display at the intended size. What puzzles me is that on the night I implemented window.devicePixelRatio, the value that was being output was "1". But now today, the value is "2.5" and I havent changed any settings.
The machine is running Windows and is set to %250 scale by default and has been since I got the laptop, if I set it to %100, the DPI output returns to "1". This isn't very helpful as everything is then tiny, including the UI Element. All of this also applies to changing the page zoom.
The problem ultimately seems to be that scales are being applied twice, so for a desired scalar of n, I get n^2 instead. I suspect the problem lies below the browser level because all browsers on this machine (Chrome, Opera, Edge, IE) display the same over inflated UI elements.
I need to figure out how to to get my computer back to the state where the master display setting is set to %250 but window.devicePixelRatio returns a value of "1". I would also really like to know why this changed in the first place so I can avoid it in the future.