How do I display a PNG image in the browser at its original resolution (i.e. one image pixel per device pixel), even if the device has high DPI settings and so on?
Maybe it's possible to determine the "device pixel ratio" / "dots per px (dppx) value" from CSS or from JavaScript and scale the image accordingly using JavaScript.
Maybe there are solutions that work purely with CSS, i.e. "direct", rather than delayed by some JavaScript execution. CSS has access to the dppx value for example here and possibly in other ways, but I don't know how to use it directly where the image is scaled.
This question asks why the scaling is different, the answer there is the DPI setting, so this doesn't help to solve my question, because I'm looking for a solution that works for any DPI setting.
