How to use min-width and max-width in CSS media queries with high density mobile device screens

Question

I am doing my first steps in repsonsive design world. I found out that the most recommended way is to use min-width and max-width to find out the size of the display area, like this:

@media (max-width: 1200px) { ... } /* for desktops */
@media (max-width: 991px) { ... } /* for laptops */
@media (min-width: 768px) and (max-width: 990px) { ... } /* for large tablets */
@media (max-width: 768px) { ... } /* for smaller tablets */
@media (max-width: 500px) { ... } /* for cellphones */

The problem is that newer phones have high density screens. My phone has width of 980px. Therefore it loads wrong CSS which is meant for larger screens.

I tried out max-device-width . It takes into account logical pixels and my phone width is 393 of those. It worked. But max-device-width is deprecated so i don't want to use it.

I found some examples of min-resolution and max-resolution as well.

It is also possible to use JavaScript to determine if the browser is mobile browser, but it doesn't seem to be the correct approach.

So I got kind of confused. Please give me hints what and how should I use to determine if the site is running on a mobile device and how to load the correct CSS for it. How it has to be done in correct and reliable way?

Thank you in advance.

Answer 1

For responsive design, it's recommended to use Mobile First approach. You start with styling the mobile version and change it while the viewport grows.

With the following media queries you have different problems:

@media (max-width: 1200px) { ... } /* for desktops */
@media (max-width: 991px) { ... } /* will match laptops and desktop because your screen with is underr 991 but also under 1200px */
@media (min-width: 768px) and (max-width: 990px) { ... } /* for large tablets */
@media (max-width: 768px) { ... } 
@media (max-width: 500px) { ... }

the correct approach should be

// you start with mobile version
@media (min-width: 500px) { ... } // will match only screen width >= 500px
@media (max-width: 768px) { ... } // will match only screen width >= 768px
@media (min-width: 768px) and (max-width: 990px) { ... } // will match only screen width >= 768px and < 900px (could be tablets also)
@media (min-width: 991px) { ... } // match also ipad on landscape mode
@media (min-width: 1200px) { ... } /* for desktops */

Answer 2

first at all, the way you use it, wouldnt work well. For example:

 @media (max-width: 1200px) { ... } /* for desktops */ @media (max-width: 991px) { ... } /* for laptops */

if a screen has the width of 900px, then both media queries would apply. Because 900px is below 1200px and below 991px. For that specific case your media queries should be as follow:

 /* for desktops */ @media only screen and (min-width: 1367px) { ... } /* for laptops */ @media only screen and (min-width: 991px) and (max-width: 1366px) { ... } /* for large tablets */ @media only screen and (min-width: 769px) and (max-width: 990px) { ... } /* for smaller tablets */ @media only screen and (min-width: 481px) and (max-width: 768px) { ... } /* for cellphones */ @media only screen and (max-width: 480px) { ... }

as you noticed, it should contain min and max width unless its the lwoer or top end (desktop and smartphones) the smallest smartphone size is 320px btw. Also I changed the media queries to screen only, its just good practise as you want to address screens only.

Screen size: Notice the difference between Hardware pixels and viewport Pixels. your phone might have something above 900 hardware pixels but onyl half or a quarter of it as viewport pixels. Hardware pixels are the pixels that a device has physically and viewport pixels the pixels which can bea dressed by css. The reason is, that the ahdrware pixels are not actually adressable is for sharpness. besides, it owuld be nearly unreadably otehrwise.

Edit: The cheap laptops screen panels have a resolution of 1366 x 768px. so the laptop width should be also set to 1366px.

Answer 3

There is a difference between device pixels and CSS pixels. On many screens they are treated the same, but on high DPI screens there can be several device pixels per CSS pixel. See this page on MDN for more reading.

To control the width in CSS pixels, use the viewport meta tag in your HTML. This tag is generally only interpreted on mobile devices so it shouldn't affect your site on desktop browsers. It specifies the minimum width at which your site will be displayed.

For example, to set your site to display at a minimum width of 500px on mobile, use:

<meta name="viewport" content="width=500, initial-scale=1">

To display the site at the browser's width use:

<meta name="viewport" content="width=device-width">

In addition to the MDN article, the following article may be helpful for setting display widths for tablets.