iPad Mini Media Query

Posted: October 23rd, 2012 by Hal Gatewood

Need to target the new iPad mini with some media queries? Well good news, it has the same size screen as the iPad 2. Use the following code to get going:

/* iPad Mini in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { /* STYLE */}

/* iPad Mini in landscape only */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLE */}

/* iPad Mini in portrait only */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLE */ }

Include a specific iPad Mini stylesheet to your website or WordPress Theme.

<link type="text/css" rel="stylesheet" media="and (min-device-width: 768px) and (max-device-width: 1024px)" href="/iPadMini.css" />

I’m glad they didn’t go crazy and make another dimension for us to target. Finally some reusability!

5 Comments

  1. Joe
    Posted October 24, 2012
    11:37 am

    Sorry, but how does this target iPad mini specifically?

    What if I want to display something different from the way it displays on an iPad2 because the screen is smaller?

  2. Chase Martin
    Posted October 30, 2012
    1:39 pm

    This doesn’t target iPad Mini specifically. The post does highlight the fact that the iPad Mini is impervious to standard media queries. This is bad because since the mini has the same demonsions as the iPad 2, apps written for iPad may no longer meet useability guidelines for button size! I’ve done several apps for big pharmaceutical companies and we had a huge problem with useabity in the first place… even had to completely redesign some interface elements because they failed user testing. Now all of those UI elements are smaller on the iPad Mini and would likely have to be redesigned. Still, the recommendation that we just pretend pretend the iPad Mini doesn’t exist is not so unsound… it likely won’t last long in the market – and since ALL apps and websites may have potential useability issues with the mini, the business priority likely will be low. I’m with OP, close your eyes and repeat, “there’s no place like home.” It’s one less media query we have to write out of the hundreds buried in all our CSS files.

  3. Sheriffdere
    Posted October 30, 2012
    5:45 pm

    It seems like you would use the same media-query for iPad mini as you would for iPad 2 ? So this does not target it specifically. I don’t foresee much of a problem though. I design my sites with large interface “buttons.” I just go with the smart phone first – move up until it looks terrible – iterate – approach.

    It would have been nice it they made it at least a one pixel difference though. They we could target it if we wanted…

  4. Justin AVery
    Posted October 31, 2012
    8:50 pm

    With the resolution the same size as the standard ipad 2 it makes it difficult to create larger buttons for a touch interface.

    As the ipad mini is also set up for retina display you could use the dpi media query value to target it ahead of the ipad2, but it will still also activate for the New iPad (or ipad 3).

  5. Hal Gatewood
    Posted November 2, 2012
    9:39 pm

    I was hoping the user agent would have iPad Mini instead of just iPad, but it looks like it doesn’t have it anywhere.

    Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A406 Safari/8536.2