CSS - pixel density independent design, CSS pixel 50% larger on desktop

Question

I've done a lot of research on the web and I'm still not sure how to deal with different screen densities in my web app. The only useful question and answer on this site I've found is this: Getting the physical screen dimensions / dpi / pixel density in Chrome on Android

According to the highest rated answer, "50px should look roughly the same across all mobile devices it might vary a little, but the CSS Pixel is our device independent way to build consistent documents and UI's"

Is it really? Maybe for most mobile devices it's true, I tested my app on 2 mobiles, one with 144ppi and other 288ppi and it looked kinda the same. But on the desktop however, it is much larger. A CSS pixel is about 50% larger on desktop. This is a problem, because even when you have separate design for large and small screens, there are a lot of mobile devices which should be considered large screen, like a tablet in landscape mode. So let's say you design something for desktop, only to be disappointed that it looks 50% smaller on tablets.

It seems to me like something is not right with device pixel ratio. I used this site to test my screens: https://bjango.com/articles/min-device-pixel-ratio/ Laptop screen is 96dpi, -webkit-min-device-pixel-ratio=1.0 Smartphone is 144dpi and device pixel ratio is 1.5

So theoretically, according to this info the element should appear the same on mobile. 144/1.5=96 But it doesn't. It's like DPR is not working properly.

Update1: I've found this on MDN

The default ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor(density/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.

I don't know if it's still applicable to all devices, but in my example it seems it is. This is very bad. 50% difference is huge. I can't believe the web hasn't got anything better to offer. It is also weird that webkit-min-device-pixel-ratio shows 1.5, but in reality it is 1.0

Update2:

Ok so I'm starting a bounty. I just want some answers, best practices, other possible cases of CSS pixel disproportions, some links. Anything that could help me in this situation.

Let me state my specific problem again. I got a cross platform web app that is supposed to run on desktop, mobiles and tablets. Due to different pixel density, every element of the app appears about 50% larger on a 96dpi laptop screen than on a mobile device (144 dpi). One thing that really interest me is why even though that window.devicePixelRatio=1.5 for this device, browser treats it like it was 1.0 (otherwise it would look the same as on desktop).

I use one design for desktop and tablet, resolution doesn't matter really. My web app is standalone, so a desktop user can set the window width to like 800px. But things will be too large on desktop compared to a tablet. I will have to set different sizes to elements on tablet and desktop. One thing that comes to my mind is using media query, (min-device-pixel-ratio : 1.5) would set the style for mobile devices.

So I got a possible workaround, but I'd like to know more about CSS pixel inconsistencies. Is it the case just for mobile vs. desktop or are there more problems? It seems to me like it is more or less the same on mobile devices, but I can't test it. I'd like some discussion about the topic, other possible workarounds, best practices, some resources. I've searched and I couldn't find anything on the web. Everyone just says, "CSS pixel is our density independent pixel", but here is the truth:

Answer 1

The size difference is by design. Mobile devices are generally viewed closer to the eye and due to the smaller screen size, more needs to be crammed into a smaller space.

The problem is, that the computer may not even know the size of the screen, or the same image might be mirrored onto two different screens - like your laptop monitor and a projector - where the size is obviously different. On top of that, most computers and some mobile phones allow screen element scaling, which affects the size of the elements on your website as well. Besides, you wouldn't want an icon to be 2cm by 2cm on both a phone and a huge projector or a 50" television, anyway.

But even if you, for whatever reason, wanted to, unfortunately there's no way of forcing your content to be rendered with the exact same real world dimensions on all devices. Units like mm, cm, in, pt and pc will produce wildly inconsistent results and shouldn't be used for content intended for screens.

For responsive websites, you should use the <meta name="viewport" content="width=device-width, initial-scale=1"/> metatag, if you're going to use px units. This will ensure, that the website scales properly. This however, does not make the the CSS pixels exactly the same size on all devices and it doesn't intend to, either. The browser will merely take into account the device size and device resolution when choosing a CSS pixel size and won't try to rescale it to fit a desktop site on a mobile phone. This is the method I personally prefer and find my cross-platform web apps to scale like intended across devices.

Another option to using the fore-mentioned meta tag would be to use em or rem to have the elements on the page scale in relation to the device font size. While em and rem refer to the current element and root element font-sizes respectively, these units can be used on other rules like width and padding to make them scale in relation to the font-size set by the vendor. This works, because different devices will have a different default font size for the root element (generally larger font for larger pixel density to provide roughly consistent font-size). Thus, using em and rem will scale accordingly - unless you overwrite it in your CSS with an absolute value, of course. Though rem (the root font size) is more convenient in some scenarios, note that only the newest Internet Explorer supports it.

Naturally the viewport units vw, vh, vmin and vmax can be of great help when creating scaling content. These, however, won't help you create content.

In conclusion, if I were you, I wouldn't be so concerned with trying to make elements exactly the same size on all monitors; it's a quest in vain. Not only will you not succeed, but even if you did, the usability of your site would suffer.