为什么css媒体查询与我的手机不匹配

我有一大堆媒体查询，根据屏幕的宽度加载不同的背景图像。出于某种原因，我的一加二，屏幕宽度为1080的肖像正在触发（最大宽度：400px）子句。为什么?

我怀疑这与像素密度有关。如果是这种情况，在考虑像素密度时，是否有最常见的屏幕尺寸列表

@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');
  }
}

编辑：

我拥有的视口是：

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

---

使用devtools检查屏幕上元素的全宽。屏幕宽度似乎是360px。准确地说是1080/3。

忘记设置视口可能是个问题。试着把它包含到你的头脑中，这是由设备像素比率引起的，它降低了实际的设备比率

以及媒体查询使用的实际显示分辨率。它不包括一加二（比例为1:3）

下面让我能够准确地确定一加二的目标

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

据我所知。在大多数情况下，我不应该这样做。但在这种情况下，它允许我下载一个更高分辨率的屏幕图像，可以利用它

---

刚刚发现dppx还没有得到很好的支持。这在safari上不起作用。

您是否缺少页面中的元视口标记？您是否已将

添加到

部分？@moped视图端口已存在。请参阅可能重复的问题？我将当前视口添加到问题中。我试着改成你的，它所做的只是阻止用户缩放——正如预期的那样。