Geek Answers Handbook

Custom CSS for iPad Mini 2, retina screen and screen / view settings in @media format

I'm trying to specify different colors for a selected range of screen sizes, however I just can't understand the iPad Mini 2 with Retina Display. It just doesn't follow the rules for its 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 displays the background color # 117700, and when I have it in the landscape, it shows the color # 770029. Why does this not comply with the rules of its resolution: 2048x1536?

I also have this in my HTML:

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

I tried using a pixel ratio of 1.5 and 2, which was suggested by others in previous questions. Any help?

The website I use is here if you want to see for yourself.

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

: LAST FIRST, , . CSS

+3

More articles:


All Articles