2

Context: I'm using window.devicePixelRatio to determine the display resolution for a few canvases on a website.

To the best of my knowledge, the DPR value should change when zooming in and out on a website. This is what happens on Chrome. But it doesn't seem to happen in Safari. Querying the value of window.devicePixelRatio or devicePixelRatio from the JS Console always returns the same value, no matter how much I zoom in or out. I've tried this on three separate computers, all of them Macs running either Safari v13.1.2, v14.1.2, or v15.1.

The MDN Web Docs page on Window.devicePixelRatio implies that the DPR should change on zoom, both in its definition at the top and in its example code. The spec linked by MDN says the following (bolded emphasis mine):

The devicePixelRatio attribute must return the result of the following determine the device pixel ratio algorithm: If there is no output device, return 1 and abort these steps. Let CSS pixel size be the size of a CSS pixel at the current page zoom scale factor and at a pinch zoom scale factor of 1.0. Let device pixel size be the vertical size of a device pixel of the output device. Return the result of dividing CSS pixel size by device pixel size.

Should Safari's window.devicePixelRatio be changing on zoom? If the DPR doesn't change with zooming, is there a different way to determine a good canvas display resolution on Safari?

This is my first question on StackOverflow so please let me know if anything can be improved.

  • 1
    "Should Safari's window.devicePixelRatio be changing on zoom?" Yes it should. "is there a different way to determine a good canvas display resolution" yes, the ResizeObserver's `devicePixelContentBoxSize` is better. "on Safari" nope... (`window.innerWidth/window.outerWidth` could probably be used for a poor workaround but I don't know of a good way to determine if this workaround is necessary or not) – Kaiido Jan 10 '22 at 06:19

0 Answers0