Correct Media query for Ipad Pro and Ipad CSS with examples

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