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 queries

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

Here are an ipad pro media queries

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

The above 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%; } }

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
You'll get a notification every time a post gets published here.