> 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.
The indirect way is for the JS to post the metric to the server, then you run with server-generated CSS. Don’t ask me if it actually works well though.
Much simpler, you also just have JS update (and keep updated - initial DPI is not always the current DPI) --devicePixelRatio under :root on the client side. Something like that existing by default is all that's really missing.