17

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:

100px rectangle, laptop vs. mobile

Community
  • 1
  • 1
Maciej Krawczyk
  • 14,825
  • 5
  • 55
  • 67
  • because we can't know the actual physical size of the output, talk of density is meaningless. let the user zoom and don't worry so much about the math as you do "how good it looks" – dandavis May 23 '16 at 03:04

1 Answers1

14

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.

Okku
  • 7,468
  • 4
  • 30
  • 43
  • Thank you for comprehensive answer. That makes sense. Some elements in my app are sized perfectly, both on desktop and mobile. But some are not. It is not as much about font size, as it is about element dimensions. For instance, my app has a top bar. On mdpi desktop monitor the bar is 32px tall, but on mobile devices it has to be much bigger, like 50px, so the user can interact with it using touch. Same for the menu. I design menu for tablet, and it will be far too large for desktop. – Maciej Krawczyk May 19 '16 at 11:25
  • So my solution is to use min-device-pixel-ratio to distinguish monitor from handhelds and apply correct styles. Is it a good approach? I'm only concerned that it may not be the best thing to do for high dpi desktop monitors. I can't test it, but common sense tells me that if I applied the queries, content would be too small on them. – Maciej Krawczyk May 19 '16 at 11:25
  • I suppose I could've been clearer with what I meant. While `em` and `rem` refer to the `element` and `root` `font-sizes` respectively, these can be used to style *other rules* like `width` and `padding` as well and *those will scale properly on different devices exactly because they have different inherit font-sizes* set by the vendor to fit the device size. I improved my answer. – Okku May 19 '16 at 11:36
  • Unfortunately it doesn't work for me. I made a test. Both on Android and Desktop html element font size is 16px by default. First I tested it by applying size in rem to an element, then I used getComputedStyle and indeed default font size is 16px on both devices. I haven't applied any font sizes with CSS. So is my solution using min-device-pixel-ratio media query good enough? – Maciej Krawczyk May 19 '16 at 13:40
  • I'd say `min-device-pixel-ratio` mainly intended for using higher resolution images. You could use JS to calculate an appropriate root `font-size` when the document loads, or just stick to using `viewport units`. Don't forget the `meta tag` I suggested. – Okku May 19 '16 at 13:53
  • I calculated it already, as I said I used getComputedStyle on the html tag and it returned 16px for both cases. I'm always using this meta. Viewport units won't help me, tablet and desktop window can have the same width. I guess I have no choice, but to depend on DPR. I will see how it's gonna work when the app is deployed and tested by users. – Maciej Krawczyk May 19 '16 at 14:12