I need to configure iPad Mini Retina and iPad Air 2 individually using media queries. Currently, the same breakpoint is firing for both (using only the width as a dimension). The iPad Mini Retina accepts the same content and reduces it to fit on the screen, making the text a little too small.
As far as I understand, they should technically work with two devices separately, but this is not so:
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 324dpi) {
.standardContent {
background-color: purple;
}
}
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 263dpi) {
.standardContent {
background-color: green;
}
}
Since the two devices have the same resolution, is it possible to distinguish one from the other with a media request?
Update
Several people indicated commas meaning "or" not "and". I updated to use this and it still hasn't done the trick:
@media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 324dpi) {
.standardContent {
background-color: purple;
}
}
@media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 263dpi) {
.standardContent {
background-color: green;
}
}