Media Queries For iPads

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. As more and more people use iPads to access the internet, it’s important for web designers or web developers to take this into action when creating websites. In this article, we’ll show you how to use media queries to optimize your website for iPad users.

Media queries are a CSS3 feature that allows you to change the styles of your website based on the width of the screen. This means you can have different styles for different devices. Media queries are simple to use. Just add a few lines of code to your CSS file, and you’re ready to go.

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

Within these code block, you can add any CSS rules that you want to apply only to iPads. This is a great way to optimize your website for this popular device.

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

Steps to adopt these CSS in the application :

1. Go-to CSS file and paste the required CSS.
2. Inside Media Query, write your CSS. below is the example, with sample CSS of example class.

 
@media screen and (min-height: 808px) and (max-height: 812px) { 
.hitArea{
top:20%;
}

}
 /* iPad with 10.2 inch Screen */ 

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

Happy Coding 🙂