Landscape media queries for iPad Pro 12.9 not working

Question

I have used the below media query CSS code but in iPad Pro 12.9 it's not working somehow. Below is the code:

/* Landscape */
@media only screen
   and (min-device-width : 1024px)
   and (max-device-width : 1366px)
   and (orientation : landscape) {
}

/* Landscape */
@media only screen
   and (min-device-width: 1024px)
   and (max-device-width: 1366px)
   and (orientation: landscape)
   and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape */
 @media only screen and (min-device-width: 1366px) 
     and (max-device-height: 1024px) 
     and (-webkit-min-device-pixel-ratio: 2) 
     and (orientation: landscape) {
}

I have referred following solutions but somehow it is not working for me.

Can someone help me here to make this one effective for iPad Pro 12.9 inches?

What exactly is not working? These are the right media queries. — Tim Gerhard, Mar 09 '18 at 14:14
Please see [ask]. Ideally you want to show what you tried and explain what was unexpected. — , Mar 09 '18 at 14:53

score 0 · Answer 1 · answered Mar 09 '18 at 14:22

Try this

/* Portrait */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

root · Answer 2 · 2023-08-15T08:13:05.563

0

Try this

@media only screen 
   and (min-device-width: 1024px) 
   and (max-device-width: 1366px) 
   and (orientation: landscape) 
   and (-webkit-min-device-pixel-ratio: 2){
 }

edited Aug 15 '23 at 08:13

answered Aug 15 '23 at 08:09

root

1
1

Landscape media queries for iPad Pro 12.9 not working

2 Answers2