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

Question

我有一堆媒体查询可以根据屏幕的宽度加载不同的背景图像。出于某种原因，我的 One plus 2，纵向屏幕宽度为 1080，触发了 (max-width: 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" />

使用开发工具检查屏幕上元素的全宽。屏幕宽度似乎是 360px。正好 1080 / 3.

Answer 1

看起来可能是忘记设置视口的问题。尝试将其纳入您的脑海 <head> <meta name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

Answer 2

这是由设备像素比例引起的，它降低了实际设备比例。

Here is a list of phones 和媒体查询使用的实际显示分辨率。它不包括一加二（其比率为 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。

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

Why does a css media query not match my phone

css

media-queries