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

问题

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.

Here is my code:

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

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?

I also have this in my HTML:

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

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

The website I am using is here if you wish to see for yourself.

回答1:

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.

I also added:

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

In order for it to be even more fit and specified.

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

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

来源：https://stackoverflow.com/questions/29185745/custom-css-for-ipad-mini-2-retina-display-and-media-screen-viewport-settings

标签

html

css

media-queries

viewport

retina-display