iPad Mini 2 的自定义 CSS、视网膜显示和 @media 屏幕/视口设置

Question

我正在尝试为选定的屏幕尺寸范围指定不同的颜色，但是我似乎无法弄清楚配备 Retina 显示屏的 iPad Mini 2。它根本不遵循其像素分辨率的规则，我想知道为什么。

这是我的代码：

/** Retina iPad **/
@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (-o-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5){
    body {
        background-color: #486ffd;
    }
}
/** 1600px non-retina screen **/
@media screen and (max-width: 1600px){
    body {
        background-color: #770029;
    }
}
/** 1000px non-retina screen **/
@media screen and (max-width: 1000px){
    body {
        background-color: #117700;
    }
}
/** 500px non-retina screen **/
@media screen and (max-width: 500px){
    body {
        background-color: #ffce00;
    }
}
/** 300px non-retina screen **/
@media screen and (max-width: 300px){
    body {
        background-color: #770200;
    }
}

现在，当我的 iPad Mini 2 处于纵向模式时，它会显示背景颜色 #117700，而当我处于横向模式时，它会显示颜色 #770029。为什么它不遵循其分辨率规则：2048x1536？

我的 HTML 中也有这个：

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=3;" />

我已经尝试在 1.5 和 2 上使用像素比，这是其他人在之前的问题中建议的。有什么帮助吗？

如果您想亲自查看，我正在使用的网站就在这里。

Answer 1

通过将 CSS 规范按正确的顺序排列，问题得以解决。

当选择器具有相同的特异性值时，最新的规则才是最重要的。

我还补充道：

only screen and (min-resolution: 192dpi)
only screen and (min-resolution: 2dppx)

为了使其更加适合和指定。

/** 1600px non-retina screen **/
@media screen and (max-width: 1600px){
    body {
        background-color: #770029;
    }
}

/** Retina iPad **/
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){
    body {
        background-color: #486ffd;
    }
}

所以正确的顺序是：LAST推翻FIRST，这意味着设备宽度需要被视网膜细节推翻。有关此内容的更多信息，请阅读此处CSS Specificity