How do you target the new 11-inch iPad Pro with media query?

Question

I am using

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

to target the iPad Pro 12.9 inch

and

@media only screen and (min-device-width: 768px) and (max-device-width: 1023px)
and (-webkit-min-device-pixel-ratio: 2) {}

to target all the other ipads.

In this case the new iPad Pro 11-inch uses the same media query of the "old" ipads even if it has a higher resolution. I need to target it differently.

If it helps it has: 2388-by-1668-pixel resolution at 264 pixels per inch (ppi)

Thank you

MistaPrime MistaPrime · Accepted Answer · 2019-10-08T20:39:08

The following CSS works in Chrome simulator but it would be wise to test it on an actual iPad Pro.

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

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

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

}

You could also change the values of 1024px to 2388px and test it out.

How do you target the new 11-inch iPad Pro with media query?

1 Answers