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声明之后。

Answer 2

您应该添加'最大分辨率'。这将为每个@media创建一个范围。这样，顺序根本不重要，因为两个组中都没有dpi值。

另外，我不确定解决方案是实现这一目标的最佳方式。我有一段时间没有使用@media，我还没有专门用于iPad，但为什么你不用max-device-height / width？同样，我不经常使用@media，但我认为这可能值得一提。

Answer 3

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

分别针对iPad Mini Retina和iPad Air 2

3 个答案: