media query for desktop and iPad landscape

Question

So there are two divs as below:

/*for ipad portrait and landscape*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    .aclass {
        display: block;
        background-color: antiquewhite;
    }
    .bclass {
        display: none;
    }
}

/*for medium device*/
@media only screen 
and (min-width : 992px) 
and (max-width : 1200px) {
    .aclass {
        display: none;
    }
    .bclass {
        display: block;
        background-color: aquamarine;
    }
}

<div class="hidden-xs aclass">div 1</div>
<div class="hidden-xs bclass">div 2</div>

I want aclass to be applied only in ipad and bclass to be applied in medium devices like desktop. The problem arises in Ipad landscape mode where bclass is applied because of the min-width: 992px, but I want aclass to be applied here. How do I solve this issue?

score 0 · Answer 1 · answered Sep 14 '17 at 10:45

0

You can also use max-height/min-height and/or max-device-height/min-device-height in the media queries and combine that with your existing queries.

answered Sep 14 '17 at 10:45

Johannes

64,305
18
73
130

device height is same for both ipad (in landscape mode) and desktop ie 768px. Can't differentiate. – Priyatam Roy Sep 14 '17 at 10:54
There is another answer here, but I don't know if it still applies: https://stackoverflow.com/a/9504571/5641669 – Johannes Sep 14 '17 at 10:58

score 0 · Answer 2 · answered Sep 14 '17 at 10:46

0

Have you tried using and (orientation: landscape)? This is a media query constraint that only enforces CSS the rules if the device is in landscape mode. Works the same for orientation: portrait

answered Sep 14 '17 at 10:46

Ryan

393
7
22

Yes, I tried. But it does not stop bclass to be applied – Priyatam Roy Sep 14 '17 at 10:48
Then perhaps try @Johannes 's solution and use `min-device-height` and `max-device-height`. Combine then until they work. – Ryan Sep 14 '17 at 10:50
device height is same for both ipad and desktop ie 768px. Can't differentiate. – Priyatam Roy Sep 14 '17 at 10:54

media query for desktop and iPad landscape

2 Answers2