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

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 的像素比率，这在之前的问题中已被其他人建议。有帮助吗？

我使用的网站是here如果你想亲眼看看。

Answer 1

通过按正确的顺序放置 CSS 规范解决了这个问题。

When selectors have an equal specificity value, the latest rule is the one that counts.

我还补充说:

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