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规范来解决问题。

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

我还补充说：

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

正确的顺序是：最后否决 FIRST ，这意味着设备宽度需要被视网膜细节所取代。有关这方面的更多信息，请参阅此处CSS Specificity

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

1 个答案: