Search code examples
canvasdpidevicepixelratio

devicePixelRatio not matching absolute px length


As I understand it, the actual length of a pixel is ~0.265 mm - so a picture having 810 CSS pixels and 1.25 devicePixelRatio should take up 0.265 * 810 / 1.25 =~ 172 mm. But placing a ruler to the screen I read 182 mm. No idea why:

enter image description here

Something is clearly off in my thought process, just measured a picture having 1024 CSS pixels width after resetting devicePixelRatio to 1 (system res. setting) and restarting chrome but the actual width is 172 mm not 1024 * 0.265 mm =~ 271 mm

*For anyone new, I had a problem with displaying realistic image sizes in relation to information about resolution and scale (like 1980 x 1080 times user defined scale). Turns out doing size / window.devicePixelRatio does very well when implemented. Images look sharp. And knowing hardware reference pixel size isn't necessery in my case because the reference pixel has a constant relation to viewing angle/ viewing distance so it all scales accordingly. Look at the comments for further information.


Solution

  • The issue is that one in isn't an inch. That is, the first one is a CSS unit, with no exact real world size equivalent.
    One CSS px is indeed 1/96 CSS in, but it's not to mean that it will take 0.26mm on any screen.
    For instance the size of one px on a smart-phone and the same px when projected through a video-projector aren't gonna be the same size at all.

    The devicePixelRatio property let's us know how many physical pixels are being used to render one CSS px, but once again, since we don't have a way to know what size a physical pixel is, we won't be able to determine the actual real-world size of one CSS px.

    To be able to determine that you'd need access to the device EDID info when available, but browsers don't expose it, or to ask you users to provide the dimensions of their monitor.