Orientation of iPad Mini Retina and iPad Air 2 individually

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

?

, , , , - ( 263dpi). , 324dpi 263dpi.

0

" ". @media. , , dpi.

, , - . @media , iPads, max-device-height/width? , @media, , .

0
@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) and (max-resolution:323dpi) {
    .standardContent {
        background-color: green;
    }
}
0
source

Source: https://habr.com/ru/post/1659872/


All Articles