How-To CSS

Media Queries For iPads

responsive web design

This page lists few different devices and media queries that would specifically target for iPAD devices. This is probably not a great practice, but it is helpful to know what are the dimensions for all these iPAD devices are in a CSS context.

A major and important component of responsive web design is creating the right user experience for the right device. With a different variety of devices on the market, this can be a bit difficult task. We’ve covered up few media queries that can be used to target designs for few iPAD devices that is commonly used.

If you’re looking for a comprehensive list of media queries for iPADs, or if your media query for iPAD PRO is not working, you can refer this article.

Here we are listing few iPAD device with their resolution as well as media queries.

  • iPAD PRO                  – 1366*1024
  • iPAD (11 inches)       – 1194*834
  • iPAD (10.9 inches)   – 1180*820
  • iPAD (10.5 inches)   – 1112*834
  • iPAD (10.2 inches)   – 1080*810

Let’s get started :

iPAD PRO – 1366*1024
@media screen and (min-width: 1360px) and (max-width: 1370px) {
	/* your custom CSS */
/* iPAD Air Pro */
iPAD (11 inches)       – 1194*834
  @media screen and (min-width: 1190px) and (max-width: 1198px) { 
    /* your custom CSS */
/* iPAD with 11 inch Screen */
iPAD (10.9 inches)   – 1180*820
@media screen and (min-height: 818px) and (max-height: 822px) {
   /* your custom CSS */
 /* iPad with 10.9 inch Screen */
iPAD (10.5 inches)   – 1112*834
@media screen and (min-width: 1110px) and (max-width: 1115px) {
     /* your custom CSS */
 /* iPad with 10.5 inch Screen */

iPAD (10.2 inches)   – 1080*810
 @media screen and (min-height: 808px) and (max-height: 812px) {
    /* your custom CSS */
 /* iPad with 10.2 inch Screen */

If you have queries regarding this, please write it in the below comment section.

Happy Coding 🙂

About the author


Software Engineer By Profession, WEB Enthusiast, Hobby Blogger. I love to share Tech Ideas and like to learn and explore new things and Technologies.

Add Comment

Click here to post a comment