For my website I want to create some divs that measure roughly 1cmx1cm in smartphones and 1.5cmx1.5cm in tablets and computers. (I'd pick a width and height for several dpi intervals)
From what I've read and if I understood it correctly just querying the resolution won't work, some high dpi smartphones have almost the same resolution as some computers.
1 - But from all the examples I found, most people query px and don't query using dpi, why is that?
2 - In high dpi computer screens we now use the Desktop Display Scaling, so how to know when the browser is scaled?
3 - Is there a way to do this?
Edit: I won't use in any way centimeters, I'll use certain px or % for several dpi intervals. I used the cm as a way to show why I need to query in dpi.
In your style sheet you can do:
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
}
People use that for serving hi-res images, and it is still detected on desktop displays.
To make sure mobile devices render the page the width of the device, you need to add the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Remember tablets are often hi-dpi. Also The reason people still query viewport with, i.e. @media all and (max-width: 320px) is because 320 pixels is still 320 px no matter what pixel density. It will be the same size.
Since you're designing for screen and not print, trying to use physical units like centimeters is a bad idea. Stick to pixels and ems.