css - 分别针对 iPad Mini Retina 和 iPad Air 2

Question

我需要使用媒体查询分别针对 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;
    }
}

Answer 1

你得到的结果总是绿色的吗？

可能唯一有问题的是声明的顺序，因为第二个媒体查询包括两个设备(每个设备的最小分辨率为 263dpi)。您可能想要切换语句，因此 324dpi 出现在 263dpi 声明之后。