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" />

使用devtools检查屏幕上元素的整个宽度。屏幕宽度似乎是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以及媒体查询使用的实际显示分辨率。它不包括One plus 2（比率为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尚未得到很好的支持。这不适用于野生动物园。

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

2 个答案: