Css 分别瞄准iPad Mini Retina和iPad Air 2

我需要针对iPad Mini Retina和iPad Air 2分别进行媒体查询。目前，两个断点都触发相同的断点（仅使用宽度作为度量）。iPad Mini Retina采用相同的内容并对其进行下采样以适应屏幕，使得文本有点太小

据我所知，从技术上讲，这两种方法应该可以分别针对这两种设备，但它不能：

@media
    (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 324dpi) {
    .standardContent {
        background-color: purple;
    }
}

@media
    (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 263dpi) {
    .standardContent {
        background-color: green;
    }
}

由于这两台设备具有相同的分辨率，是否可以通过媒体查询来区分这两台设备

更新

一些人已经指出逗号的意思是“或”不是“和”。我更新了使用它，但它仍然没有起作用：

@media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 324dpi) {
    .standardContent {
        background-color: purple;
    }
}

@media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 263dpi) {
    .standardContent {
        background-color: green;
    }
}

---

结果总是绿色的吗

---

可能唯一错误的是声明的顺序，因为第二个媒体查询包括两个设备（每个设备的最小分辨率为263dpi）。您可能需要切换语句，因此324dpi位于263dpi声明之后。

您应该添加一个“最大分辨率”。这将为每个@media创建一个范围。这样，顺序就无关紧要了，因为两组中都不能有dpi值

---

此外，我不确定决心是否是实现这一目标的最佳方式。我已经有一段时间没有使用@media了，我也从来没有专门为ipad使用过它们，但是为什么不使用最大设备高度/宽度呢？同样，我不经常使用@media，但我认为这可能值得一提。

切换顺序也会产生同样的效果，但会显示紫色。切换顺序是正确的。如果这不起作用，也许那些机器上的dpi不是你想象的那样。或者@安迪-它不起作用，我用的是真正的设备。我不知道为什么，但显然Safari只为

分辨率

标志提供了“部分”支持。不幸的是，这不适用于单独针对iPad Air 2和iPad Mini Retina。不幸的是，这并不能解决最初的问题。如果没有

最大分辨率

，它仍然可以工作。问题似乎在于CSS没有可用的设备属性来区分这两个设备。就CSS而言，这两种设备的ppi都是192，维度相同。

@media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 324dpi) {
    .standardContent {
        background-color: purple;
    }
}

@media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 263dpi) and (max-resolution:323dpi) {
    .standardContent {
        background-color: green;
    }
}