Many times I've had to design responsive websites targeting specific devices with CSS media queries, and not just base the break points from the site's content. Because of this, I've ended up with a somewhat large list of CSS media queries for typical devices over the past year or two.
I've posted these media queries to help designers & developers save some time searching. I'll continue adding to the list as Apple (or another company that can sell a significant amount of products) releases them.
Thanks to Apple's work in creating a consistent experience for users, and easy time for developers, all 5 different iPads (iPads 1-5 and iPad mini) can be targeted with just one CSS media query. The next few lines of code should work perfect for a responsive design.
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
If you're looking to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add @2x graphics, or other features for the tablet's Retina display, use the following media queries.
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }
If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work like a charm in your responsive design!
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }
Targeting the new iPad mini with CSS definitely isn't as difficult as it could have been. Apple thankfully made things easy on developers and gave the iPad mini the same resolution as the iPad 1 and 2.
As for the device-pixel-ratio of the iPad mini, I was informed by Daring Fireball's John Gruber that this also remains the same as the iPad 1 & 2.
This means it's really easy for developers to target all iPads with very little code, but it also means there's no way to specifically target an iPad mini with pure CSS. In other words, nothing is new, and you might want to make your text a tiny bit bigger.
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }
Screen Width = 768px (CSS Pixels) Screen Height = 1024px (CSS Pixels) Screen Width = 768px (Actual Pixels) Screen Height = 1024px (Actual Pixels) Device-pixel-ratio: 1
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) { /* STYLES GO HERE */ }
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) { /* STYLES GO HERE */ }
It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) { /* STYLES GO HERE */ }
Screen Width = 320px (CSS Pixels) Screen Height = 568px (CSS Pixels) Screen Width = 640px (Actual Pixels) Screen Height = 1136px (Actual Pixels) Device-pixel-ratio: 2
Screen Width = 320px (CSS Pixels) Screen Height = 480px (CSS Pixels) Screen Width = 640px (Actual Pixels) Screen Height = 960px (Actual Pixels) Device-pixel-ratio: 2
Screen Width = 320px (CSS Pixels) Screen Height = 480px (CSS Pixels) Screen Width = 320px (Actual Pixels) Screen Height = 480px (Actual Pixels) Device-pixel-ratio: 1