Why Can’t We Ensure 1 Pixel Equals 1 cm on Every Screen?

It's tricky because screen resolutions don't correspond to absolute size values. For instance, a 22" screen can display at both 4k and 1080p—same size but different pixel counts. You might want to look into the sizing units available on CSS. They could provide some insight into your options.

Using CSS to define a 1cm unit is your best bet for a rough approximation. If you want to calculate it in JavaScript, there's a trick where you create an element sized to 1cm, measure it, and adjust based on the results. It won't be perfect, but it could help you get close.

To accurately determine physical dimensions, you'd need an API that identifies the display model and its pixels per inch. But that could be used for user fingerprinting, which browsers generally avoid. It would make sense to include a calibration step for users, like using a real object.

Ultimately, the issue comes down to the fact that DPI information is often not accessible; you can't reliably get it. That's why ensuring that 1 pixel equals 1 cm is so complicated in web development.

Guaranteeing accurate sizes across different screens is nearly impossible due to varying browser zoom and OS scaling settings. I suggest showing your object next to something with a well-known size, like a deck of cards or a soda can. That way, even if the measurements aren't exact, users have a reference to make sense of it.