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\'v

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.