iPad Mini 2 的自定义 CSS，视网膜显示屏和@media screen/viewport 设置

Question

我正在尝试为选定的屏幕尺寸范围指定不同的颜色，但我似乎无法弄清楚 iPad 带 Retina 显示屏的 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

iPad Mini 2 的自定义 CSS，视网膜显示屏和@media screen/viewport 设置

Custom CSS for iPad Mini 2, retina display and @media screen/viewport settings

html

css

media-queries

viewport

retina-display