iPad Mini Media Query

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!