{

Correct Media query for Ipad Pro and Ipad CSS with examples


Sometimes, you want to design pages for Ipad and Ipad pro, So you have to write a CSS style using media queries.

This post covers the correct media query for Ipad for different orientations.

Apple has iPad tablets with different versions 11 and the latest version 12. x.

Ipad and pro’s latest versions are 12. x

It has two orientations.

  • Landspace
  • portrait

We write media queries with device width, height, and orientation.

Ipad media queries CSS styles

Ipad has two versions(basic and pro ) Here is an ipad media querie

@media all and (device-width: 768px) {
  
}

Here is an ipad pro media querie

@media all and (device-width: 1024px) {
  
}

The above all code works only without orientation.

To make it with orientation, We need to specify the height and orientation.

Ipad orientation CSS queries

@media only screen and (width: 768px) and (height: 1024px) and (orientation:portrait) { div{ width:50%; } }

@media only screen and (width: 768px) and (height: 1024px) and (orientation:landscape) { div{ width:50%; } }

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.