Ipad Mini Specfic CSS Media Queries

Ipad Mini Specfic CSS Media Queries?

The iPad mini will just inherit the same viewport size as the original iPad. But for more precise, you can target pixel density of the iPad mini, so:

/* ipad Mini Portrait */
@media only screen and (width:768px) and (resolution: 163dpi) {

}

/* ipad Mini Landscape */
@media only screen and (width:1024px) and (resolution: 163dpi) {

}

CSS media query to target iPad and iPad only?

Finally found a solution from : Detect different device platforms using CSS

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

To reduce HTTP call, this can also be used inside you existing common CSS file:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* your css rules for ipad portrait */
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}

Other references:

• https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html

CSS Media Queries for specific iPads

Get rid of the first media query then set the min-width just above the previous breakpoint -- see the code below

body { height: 100vh; margin: 0 }

/* iPad 9.7 */
body { background-color: green }

/* iPad 10.5 */
@media screen and (min-width: 1025px) {
  body { background-color: red }
}

/* iPad 12.9 */
@media screen and (min-width: 1113px) { 
  body { background-color: orange }
}

Media query is not working for 768px ipad portrait

For iPads in portrait mode it is generally best to be more specific in the media queries, so try something like this:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    /* Styles Here */
}

This way you target devices with screen width between 768px and 1024px which is what the iPad is, then you filter your targets by specifying the orientation as portrait.

You could try something like this - reducing the max-width - to minimize any other screens that it could effect, but I haven't tried it so can't verify it works.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 770px) 
and (orientation : portrait) { 
    /* Styles Here */
}

---

Related Topics