0

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.

Josh Lee
  • 171,072
  • 38
  • 269
  • 275
Thomas Bouffard
  • 61
  • 1
  • 5
  • devicePixelRatio is not the pixel-density ratio of your monitor, it is the one between CSS pixels and physical pixels. OS and browser zoom levels will indeed impact this value. As to your issue, we would need to see how you do use this value in order to be able to help you more. – Kaiido Nov 12 '18 at 07:37
  • This value is just used as a scalar, it's multiplied with the length properties of the UI elements. So if the pixel is half the standard size, the intent is that this scalar draws all 10px rectangles as 20px wide instead. If that isn't the right value for what I want, I would be happy for a suggested alternative, but it also leaves me confused as to why it ever worked at all. – Thomas Bouffard Nov 12 '18 at 08:26
  • yes that is the one value we have access to, but be careful it includes the zoom levels so you will want to at least round it. May interest you:https://stackoverflow.com/questions/53062962/detect-screen-resolution-independently-of-page-zoom-level-and-windows-scale-sett/53075294#53075294 – Kaiido Nov 12 '18 at 08:32
  • Thanks for the link! I'm going to re-read it again when I'm more awake but I do have a few points to make until then. I am not using fullscreen and am not really worried about crisp rendering in the ui, the game itself dynamically fits the window and the viewport scales to best fit the underlying scene rectangle, it makes no assumption about window size or aspect ratio on load, this is part of what makes sizing the UI so difficult as it can't use the canvas dimensions, its size needs to tie to the real world regardless of the size relative to the scene that results. – Thomas Bouffard Nov 12 '18 at 09:37

0 Answers0