0

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.

pmad
  • 89
  • 6
  • Looking at your question from my video projector then from my phone, nope a `px` is not 0.265mm. Not sure where you heard that but they were wrong – Kaiido Mar 03 '23 at 10:16
  • https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel – pmad Mar 03 '23 at 11:34
  • Reading up on https://drafts.csswg.org/css-values/#absolute-lengths And they differentiate visual angle unit (px) from physical units but then they state "in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio" . The way I read it is that px / phisical unit should be a constant (at given window scale) and I thought that would be the value of window.devicePixelRatio – pmad Mar 03 '23 at 11:52
  • And by px / phisical unit I take the ratio of scaled pixel size to 'normatively defined' absolute length of 1/96 of 1 inch as stated in first link'. – pmad Mar 03 '23 at 12:01
  • 1
    Ouch, I see how this MDN article is misleading, the specs they quote say `1px = 1/96th of 1in`, where `in` is not one "real world" inch, but yet another magic unit. There is no way currently to know the size of the device, though it's been asked before, it's probably not gonna happen soon, see https://discourse.wicg.io/t/one-inch-is-not-an-inch/1228. And thus, it's impossible to know how big one device pixel is. `devicePixelRatio` says how many device pixels fir in one `px`. But failing to know how big that device pixel is, we're back to square one. (I'll try to edit that MDN page) – Kaiido Mar 03 '23 at 12:06
  • Thank You. Looks like window.devicePixelRatio takes into account system screen settings (e.g.125% recommended screen scale in Windows) and browser window scaling (and combining these two) but does not give us the real-world screen dimensions used to actually define the size of the reference pixel mentioned in second link. – pmad Mar 03 '23 at 12:57
  • 1
    FYI, my changes to the MDN article have been applied. As for your question, I'm not sure what to do with it. What answer would benefit future readers? There was https://stackoverflow.com/questions/54430842/how-can-i-get-dpi-from-image-in-js/54454509#54454509 but the question doesn't really match.... Or we do have a "resolved in a way unlikely to help others" close reason, but I still have the feeling your question could be shaped in something useful. If you see how it could be edited, that'd be great. – Kaiido Mar 05 '23 at 23:39
  • It might be useful for anyone doing quick google search and seeing that the physical size of a pixel is 0.26 mm. I see this question and comments as another angle in explaining of why 'my ruler' is telling me different. But feel free to delete it. – pmad Mar 06 '23 at 07:12
  • 1
    Agreed, I posted a Community Wiki which kind of resumes our conversation here. Hopefully that'll help someone. – Kaiido Mar 06 '23 at 07:28

1 Answers1

1

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.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • As I understand it and what;s been most useful for me is that CSS pixel matches hardware reference pixel as far as window.devicePixelRatio equals 1. And "The reference pixel is the visual angle of one pixel on a device with a device pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch)." ~ drafts.csswg.org/css-values/#absolute-lengths – pmad Mar 06 '23 at 08:09
  • So to clarify, 1 px will take 0.26mm on a screen that has such proportions that recommended reading distance is an arm's length. – pmad Mar 06 '23 at 08:13
  • Yes, if there is such a device that fits all these rules. Out of theory, it's better to think that all absolute CSS units don't map to real world measurements at all. – Kaiido Mar 06 '23 at 08:19