buy youtube views
Skip to content

January 21, 2013

1

How to target iPad mini in CSS Media Queries

With the increased use of the iPad mini, you need to be sure that your site displays well on the smaller screen. If you already have an iPad or tablet optimized website, the iPad mini will just inherit the same viewport size as the original iPad which is 768×1024 (in portrait mode) just in a smaller screen.

 

However, you may want to target the iPad mini specifically, due to it’s smaller screen, font’s may be slightly smaller and you may be able to utilize the space better. To do this, we can target the viewport size of the iPad coupled with the pixel density of the iPad mini.

 

So, in a media query we would do the following:

 

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

 

The media queries above will allow you to target iPad Mini in both the portrait and landscape orientation. The landscape media query could be coupled with the normal iPad portrait rule as the size is very similar. To couple it with the normal iPad portrait query, you can use the code below:

 

/* All iPads Portrait & iPad Mini Landscape */
@media only screen and ((width:768px) and (resolution:132dpi or resolution:263px) or ((width:1024px) and (resolution: 163dpi)) {
 
}
 
/* Only iPad 1 & 2 Portrait & iPad Mini Landscape */
@media only screen and ((width:768px) and (resolution:132dpi) or ((width:1024px) and (resolution: 163dpi)) {
 
}

The reason for two options above, is you may want to target the retina iPad display seperatley to take care of high resolution images.

That is how to target iPad mini displays in CSS media queries.

1 Comment Post a comment
  1. Feb 25 2014

    I usually use the following js:

    $(document).ready(function(){
    var mobile_timer = false;
    if(navigator.userAgent.match(/iPad/i)) {
    $(‘#viewport’).attr(‘content’,'width=1024, maximum-scale=2.0′);
    }
    });

    Set an id on the viewport meta tag and adjust the width depending on your code

    Reply

Share your thoughts, post a comment.

(required)
(required)

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments