Font sizes get scaled in the browser. So when you ask for a 9px font, the browser treats that as 9px in virtual pixels, then maps it into 18px physical pixels.
It mostly works, but gets weird when you have non-scaled content in the design.
You don’t have non-scaled content in the design. Everything is scaled. <img width="32" height="32"> will be 32px (as in, CSS pixels) wide, whether that means 32dpx (device pixels) or 64dpx or something else.
(OK, so there are a few escape hatches; you have things like <img srcset> which allow you to choose different image sources for different scaling factors, and you can also query devicePixelRatio and change things based on it—though all of this isn’t actually guaranteed to map to physical pixels, e.g. my system uses 1.5× scaling but Firefox hasn’t finished implementing fractional scaling under Wayland so it renders at 2× and then scales down to 1.5×, so any line that is carefully made “one device pixel wide” will actually only be ⅔ of a device pixel.)
In browsers, there are supposed to be roughly 72px per inch. This should get scaled, assuming the OS/Browser knows what the actual pixel density per inch is. And even then the scaling may not be linear to reality.
If you've ever run a mobile device without the real dimensions set properly (cheaper models, or custom roms) it gets interesting to say the least. Having less than stellar vision up close, I have every accessibility setting on my phone maxed... It's bad enough as it is the number of applications/sites that will render (in particular modals) off-screen.
In the end, however, nearly everything is scaled to either the real pixels, or often assume 72/inch as the actual screen density and scale accordingly. You really never know which.
chrismorgan|2 years ago
You don’t have non-scaled content in the design. Everything is scaled. <img width="32" height="32"> will be 32px (as in, CSS pixels) wide, whether that means 32dpx (device pixels) or 64dpx or something else.
(OK, so there are a few escape hatches; you have things like <img srcset> which allow you to choose different image sources for different scaling factors, and you can also query devicePixelRatio and change things based on it—though all of this isn’t actually guaranteed to map to physical pixels, e.g. my system uses 1.5× scaling but Firefox hasn’t finished implementing fractional scaling under Wayland so it renders at 2× and then scales down to 1.5×, so any line that is carefully made “one device pixel wide” will actually only be ⅔ of a device pixel.)
tracker1|2 years ago
If you've ever run a mobile device without the real dimensions set properly (cheaper models, or custom roms) it gets interesting to say the least. Having less than stellar vision up close, I have every accessibility setting on my phone maxed... It's bad enough as it is the number of applications/sites that will render (in particular modals) off-screen.
In the end, however, nearly everything is scaled to either the real pixels, or often assume 72/inch as the actual screen density and scale accordingly. You really never know which.
chrismorgan|2 years ago
My comment elsewhere in the thread is relevant on these units and how they’re anchored: https://news.ycombinator.com/item?id=36001822.