iPad Mini 2的自定义CSS，retina显示和@media屏幕/视口设置 [英] Custom CSS for iPad Mini 2, retina display and @media screen/viewport settings

问题描述

我试图为所选范围的屏幕尺寸指定不同的颜色，但我只是不能看出iPad 2与Retina显示。

I'm trying to specify different colors for selected range of screen sizes, however I just can't seem to figure out the iPad Mini 2 with Retina Display. It does simply not follow the rules of it's pixel resolution and I wonder why.

这是我的代码：

/** 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。

Now when my iPad Mini 2 is in portrait mode it shows the background color #117700, and when I have it in landscape it shows the color #770029. How come it does not follow the rules of its resolution on: 2048x1536?

我也在我的HTML中有这个：

I also have this in my HTML:

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

我试过使用1.5和2的像素比率，这是其他人在之前的建议问题。任何帮助？

I've tried using both a pixel ratio on 1.5 and 2 which has been suggested by others in previous questions. Any help?

我使用的网站是此处

推荐答案

问题是通过以正确的顺序放置CSS规范解决的。

The problem was solved by putting the CSS specification in the correct order.

当选择器具有相等的特异性值时，最新的规则是计数的
。

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特异性

So correct order is: LAST overrules FIRST, which means device-width needs to be overruled by the retina specifics. More about this can be read here CSS Specificity

这篇关于iPad Mini 2的自定义CSS，retina显示和@media屏幕/视口设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！