When designing/developing a website, I constantly have to search for Media Queries for various devices. So I thought it would be a good idea to create a list of the media queries I use the most.
Below is a list of media queries for Apple devices, as these are the most common devices. I will try and constantly update these media queries when new Apple devices are launched.
iPad Media Queries (All generations)
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
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 /Mini 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: 1) { /* 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: 1) { /* 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: 1) { /* STYLES GO HERE */ }
New iPhone Media Queries
iPhone 13 Mini
/* 2340x1080 pixels at 476ppi */
@media only screen
and (device-width: 375px)
and (device-height: 812px)
and (-webkit-device-pixel-ratio: 3) { /* STYLES GO HERE */ }
This media query is used for: iPhone 13 mini, iPhone 12 mini, iPhone 11 Pro, iPhone Xs, and iPhone X
iPhone 13 and iPhone 13 Pro
/* 2532x1170 pixels at 460ppi */
@media only screen
and (device-width: 390px)
and (device-height: 844px)
and (-webkit-device-pixel-ratio: 3) { /* STYLES GO HERE */ }
This media query is used for: iPhone 13, iPhone 12 and iPhone 12 Pro
iPhone 13 Pro Max
/* 2778x1284 pixels at 458ppi */
@media only screen
and (device-width: 428px)
and (device-height: 926px)
and (-webkit-device-pixel-ratio: 3) { /* STYLES GO HERE */ }
This media query is used for: iPhone 13 Pro Max and iPhone 12 Pro Max
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 */ }
