Why does a css media query not match my phone

Question

I have a bunch of media queries that load a different background image depending on the width of the screen. For some reason my One plus 2, with a screen width of 1080 in portrait is triggering the (max-width: 400px) clause. Why?

I suspect it is something to do with pixel density. If this is the case, is there a list somewhere of the most common screen sizes when taking pixel density into account?

@media screen and (max-width: 1080px) {
  .mainImage {
    background-image: url('shop-home-vertical-1080.jpg');
  }
}

@media screen and (max-width: 800px) {
  .mainImage {
    background-image: url('shop-home-vertical-800.jpg');
  }
}

@media screen and (max-width: 600px) {
  .mainImage {
    background-image: url('shop-home-vertical-600.jpg');
  }
}

@media screen and (max-width: 400px) {
  .mainImage {
    background-image: url('shop-home-vertical-400.jpg');
  }
}

Edit:

The viewport I have is:

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

Using devtools to inspect the full width of elements on the screen. The screen width seems to be 360px. Exactly 1080 / 3.

Are you missing the meta viewport -tag from your page? https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag — Esko, Jun 30 '16 at 09:42
Possible duplicate question? http://stackoverflow.com/questions/16499299/media-query-for-high-resolution-mobile-1080px-xperia-z-etc — Andrew Bone, Jun 30 '16 at 10:49

score 1 · Answer 1 · answered Jun 30 '16 at 09:44

1

It looks like it could be a problem forgetting to set a viewport. Try including this into your head <head> <meta name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

answered Jun 30 '16 at 09:44

Robbin van der Jagt

796
4
15

I added my current viewport to the question. I tried changing to yours and all it does is prevent the user from zooming - as expected. – SystemicPlural Jun 30 '16 at 10:01

SystemicPlural · Accepted Answer · 2016-06-30T12:26:51.470

This is caused by the device pixel ratio, which down scales the actual device ratio.

Here is a list of phones and the actual display resolution used by media queries. It doesn't include the One plus two (which has a ratio of 1:3)

The following allows me to target the one plus two accurately.

@media screen and (max-width: 360px) and (orientation: portrait) and (min-resolution: 3dppx) {
  .mainImage {
    background-image: url('shop-home-vertical-1080.jpg');
  }
}

As I understand it. In most circumstance I shouldn't do this. But in this case it allows me to download a higher resolution image for screens that can take advantage of it.

Just discovered that dppx is not well supported yet. This won't work on safari.

Why does a css media query not match my phone

2 Answers2