Media query for targeting iPad

Question

I have an issue with writing specific queries for iPad Pro and iPad which appear on google Chrome developer tools... I cant target iPad Pro e.g.

"and (min-device-width: 768px) and (max-device-width: 1024px)"

But it also happens to work for other resolutions like

"and (min-device-width: 1024px) and (max-device-width: 1366px)"

Does anybody have answer as to how I write different media query rules for different iPad sizes? Thanks a lot : )

Emiel Zuurbier Emiel Zuurbier · Accepted Answer · 2020-02-28T11:22:28

iPads can use the -webkit-min-device-pixel-ratio query to check if the screen is retina or not. Older iPads have a -webkit-min-device-pixel-ratio value of 1. iPad 3 and above have a value of 2, while both having the same screen dimensions.

/* iPad 1, 2, Mini and Air */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad 3, 4 and Pro 9.7" */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

CSSTricks have a great post on this to recognize all kinds of devices.

Media query for targeting iPad

1 Answers