What Is Correct Media Query for iPad Pro

iPad pro 11 (2018) exact css media query

Apple iPad Pro 11 (2018) Only Media Query which covers portrait to landscape width.

@media only screen and (min-width: 834px) and (max-width: 1194px)  { /* Your Styles... */ }

How make Media query work with Ipad Pro 12.9

Try using separate media queries. One for landscape, one for portrait, one for both.

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

/* 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) {

}

Media queries for ipad pro and laptops

The "standard" way of handling this would be to not use device specific media queries.

https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints/

EDIT: Added a Snippet below showing how you can use only max-width without using min-width, thus avoiding any overlap.

div {

 width: 100px;

 height: 100px;

 background-color: grey;

}

@media screen and (max-width: 780px){

 div {

   background-color: green;

 }

}

@media screen and (max-width: 480px){

 div {

   background-color: blue;

 }

}

@media screen and (max-width: 300px){

 div {

   background-color: yellow;

 }

}

<div></div>

---

Related Topics