Struggling to assign different colors for various screen sizes, I'm facing a perplexing issue with the iPad Mini 2's Retina Display. Despite its pixel resolution, it doesn't conform to the specified rules and I'm left wondering why.
This is the code I am using:
/** 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;
}
}
In portrait mode, my iPad Mini 2 displays background color #117700, while in landscape mode it shows #770029. How does it not adhere to its resolution of 2048x1536?
My HTML also includes:
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=3;" />
I've attempted both pixel ratios of 1.5 and 2 as suggested by others, but haven't found a solution yet. Any suggestions?
The website in question can be found here if you'd like to investigate further.