title: Why does a css media query not match my phone
body: <p>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? </p>
  
  <p>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?</p>
  
  <pre><code>@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');
    }
  }
  </code></pre>
  
  <p>Edit:</p>
  
  <p>The viewport I have is:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
  </code></pre>
  
  <p>Using devtools to inspect the full width of elements on the screen. The screen width seems to be 360px. Exactly 1080 / 3.</p>