Why does a css media query not match my phone
<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>