Created
July 3, 2018 12:40
-
-
Save Lysak/318e720ac01ba4e132e27e61f2362bcf to your computer and use it in GitHub Desktop.
CSS Media Queries for iPads & iPhones
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
iPad Media Queries (All generations - including iPad mini) | |
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. | |
iPad in portrait & landscape | |
@media only screen | |
and (min-device-width : 768px) | |
and (max-device-width : 1024px) { /* STYLES GO HERE */} | |
iPad in landscape | |
@media only screen | |
and (min-device-width : 768px) | |
and (max-device-width : 1024px) | |
and (orientation : landscape) { /* STYLES GO HERE */} | |
iPad in portrait | |
@media only screen | |
and (min-device-width : 768px) | |
and (max-device-width : 1024px) | |
and (orientation : portrait) { /* STYLES GO HERE */ } | |
iPad 3 & 4 Media Queries | |
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. | |
Retina iPad in portrait & landscape | |
@media only screen | |
and (min-device-width : 768px) | |
and (max-device-width : 1024px) | |
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */} | |
Retina iPad in landscape | |
@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 */} | |
Retina iPad in portrait | |
@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 */ } | |
iPad 1 & 2 Media Queries | |
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! | |
iPad 1 & 2 in portrait & landscape | |
@media only screen | |
and (min-device-width : 768px) | |
and (max-device-width : 1024px) | |
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */} | |
iPad 1 & 2 in landscape | |
@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 */} | |
iPad 1 & 2 in portrait | |
@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 */ } | |
Updated on February 26, 2018 | |
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. | |
iPad mini in portrait & landscape | |
@media only screen | |
and (min-device-width : 768px) | |
and (max-device-width : 1024px) | |
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */} | |
iPad mini in landscape | |
@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 */} | |
iPad mini in portrait | |
@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 */ } | |
iPad mini Resolution | |
Screen Width = 768px (CSS Pixels) | |
Screen Height = 1024px (CSS Pixels) | |
Screen Width = 768px (Actual Pixels) | |
Screen Height = 1024px (Actual Pixels) | |
Device-pixel-ratio: 1 | |
Updated on February 26, 2018 | |
iPhone 10 Media Queries | |
iPhone X in portrait & landscape | |
@media only screen | |
and (min-device-width : 375px) | |
and (max-device-width : 812px) | |
and (-webkit-device-pixel-ratio : 3) { /* STYLES GO HERE */} | |
iPhone X in landscape | |
@media only screen | |
and (min-device-width : 375px) | |
and (max-device-width : 812px) | |
and (-webkit-device-pixel-ratio : 3) | |
and (orientation : landscape) { /* STYLES GO HERE */} | |
iPhone X in portrait | |
@media only screen | |
and (min-device-width : 375px) | |
and (max-device-width : 812px) | |
and (-webkit-device-pixel-ratio : 3) | |
and (orientation : portrait) { /* STYLES GO HERE */ } | |
iPhone 6, 7, & 8 Media Queries | |
iPhone 6, 7, & 8 in portrait & landscape | |
@media only screen | |
and (min-device-width : 375px) | |
and (max-device-width : 667px) { /* STYLES GO HERE */} | |
iPhone 6, 7, & 8 in landscape | |
@media only screen | |
and (min-device-width : 375px) | |
and (max-device-width : 667px) | |
and (orientation : landscape) { /* STYLES GO HERE */} | |
iPhone 6, 7, & 8 in portrait | |
@media only screen | |
and (min-device-width : 375px) | |
and (max-device-width : 667px) | |
and (orientation : portrait) { /* STYLES GO HERE */ } | |
iPhone 6, 7, & 8 Plus Media Queries | |
iPhone 6, 7, & 8 Plus in portrait & landscape | |
@media only screen | |
and (min-device-width : 414px) | |
and (max-device-width : 736px) { /* STYLES GO HERE */} | |
iPhone 6, 7, & 8 Plus in landscape | |
@media only screen | |
and (min-device-width : 414px) | |
and (max-device-width : 736px) | |
and (orientation : landscape) { /* STYLES GO HERE */} | |
iPhone 6, 7, & 8 Plus in portrait | |
@media only screen | |
and (min-device-width : 414px) | |
and (max-device-width : 736px) | |
and (orientation : portrait) { /* STYLES GO HERE */ } | |
iPhone 5 & 5S Media Queries | |
iPhone 5 & 5S in portrait & landscape | |
@media only screen | |
and (min-device-width : 320px) | |
and (max-device-width : 568px) { /* STYLES GO HERE */} | |
iPhone 5 & 5S in landscape | |
@media only screen | |
and (min-device-width : 320px) | |
and (max-device-width : 568px) | |
and (orientation : landscape) { /* STYLES GO HERE */} | |
iPhone 5 & 5S in portrait | |
@media only screen | |
and (min-device-width : 320px) | |
and (max-device-width : 568px) | |
and (orientation : portrait) { /* STYLES GO HERE */ } | |
iPhone 2G, 3G, 4, 4S Media Queries | |
It's noteworthy that these media queries are also the same for iPod Touch generations 1-4. | |
iPhone 2G-4S in portrait & landscape | |
@media only screen | |
and (min-device-width : 320px) | |
and (max-device-width : 480px) { /* STYLES GO HERE */} | |
iPhone 2G-4S in landscape | |
@media only screen | |
and (min-device-width : 320px) | |
and (max-device-width : 480px) | |
and (orientation : landscape) { /* STYLES GO HERE */} | |
iPhone 2G-4S in portrait | |
@media only screen | |
and (min-device-width : 320px) | |
and (max-device-width : 480px) | |
and (orientation : portrait) { /* STYLES GO HERE */ } | |
iPhone 5 Resolution | |
Screen Width = 320px (CSS Pixels) | |
Screen Height = 568px (CSS Pixels) | |
Screen Width = 640px (Actual Pixels) | |
Screen Height = 1136px (Actual Pixels) | |
Device-pixel-ratio: 2 | |
iPhone 4/4S Resolution | |
Screen Width = 320px (CSS Pixels) | |
Screen Height = 480px (CSS Pixels) | |
Screen Width = 640px (Actual Pixels) | |
Screen Height = 960px (Actual Pixels) | |
Device-pixel-ratio: 2 | |
iPhone 2G/3G/3GS Resolution | |
Screen Width = 320px (CSS Pixels) | |
Screen Height = 480px (CSS Pixels) | |
Screen Width = 320px (Actual Pixels) | |
Screen Height = 480px (Actual Pixels) | |
Device-pixel-ratio: 1 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment