What I want to know is who decided to break px, the last thing we need is yet another screwball physical measurement, css was already full of them. But what "tut tut, everybody is using px and these new hi-dpi displays are rendering things really tiny, we can't have that" and now px as a useful unit is ruined.
Is there a way to use real pixels? My, admittedly quick, search says no. at least nothing jumps out at me from the spec.
px is still a useful unit. the user's operating system applying a scaling fator doesn't make it not useful.
if the user's operating system is configured to draw pixels at a 1:1 ratio, your pixels will be drawn at a 1:1 ratio. if the user's operating system is configured to draw pixels at a 2:1 or 3:1 ratio, you as a web developer don't get to override that, but you're still addressing pixels directly. if you want to write software that manages the user's hardware directly without giving them options to override it, the web is probably not the right platform for you.
You could set the CSS zoom property to 1/window.devicePixelRatio with JavaScript but I think you can't do it with CSS only. If you do that then px is physical px. This doesn't include browser zoom though or mobile pinch to zoom. You could also get those with JavaScript but then people would be really confused by the behavior of your website.
You definitely can't get pure integers though it's always a float even if you use whole numbers. It does eventually get rounded before becoming pixels though.
To be honest, I'm quite thankful to whomever decided this. If it were the other way around and everyone used px but it represented true pixels, there's no doubt developers would be incorrectly designing interfaces across the board and websites looking totally off would be a common occurance due to you having an hdpi display or not having one (like what frequently happens with x based apps in Linux).
As an aside, technically, yes, it may have been better to converge on some more clearly "fake" unit rather than calling it a pixel but for me that's a nit pick.
No one decided to break it, it was 1/96th of an inch from the beginning.
The problem with different screens having different pixel densities was already present and obvious in 1996.
"Real" pixels are useless if you don't know anything about the screen you're going to render on.
[dead]
You can kinda get close in pure CSS with CSS media queries using the resolution query on dppx measurements; but that only allows you to be as granular as however many distinct "dots per CSS pixel" values you want to add media queries for. Something like this would let you scale by device resolution for both traditional 96dpi screens, higher DPI 192dpi screens, and super high resolution 288dpi screens:
But unfortunately there's no way to directly use the devicePixelRatio value you can read from Javascript directly in a CSS calculation to be able to get a precise scaling on any arbitrary pixel density.