CSS Media Queries Overview

iPad Media Queries (All generations – including iPad mini)

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

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

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

iPad 3 & 4 Media Queries
For 3rd and 4th generation Retina iPads (or tablets with similar resolution)  with @2x graphics use the following media queries:

iPad Retina portrait & landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { }

iPad Retina landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { }

iPad Retina portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { }

iPad 1 & 2 Media Queries

iPad 1 & 2 portrait & landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){ }

iPad 1 & 2 landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) { }

iPad 1 & 2 portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) { }

iPad mini Media Queries

iPad mini portrait & landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) { }

iPad mini landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) { }

iPad mini portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) { }

iPad mini Resolutions
Screen Width = 768px (CSS Pixels)
Screen Height = 1024px (CSS Pixels)
Screen Width = 768px (Actual Pixels)
Screen Height = 1024px (Actual Pixels)

iPhone 6 Media Queries

iPhone 6 portrait & landscape
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { }

iPhone 6 landscape
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) { }

iPhone 6 portrait
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { }

iPhone 6 Plus Media Queries

iPhone 6 Plus portrait & landscape
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) { }

iPhone 6 Plus landscape
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) { }

iPhone 6 Plus portrait
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) { }

iPhone 5 & 5S Media Queries
iPhone 5 & 5S portrait & landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { }

iPhone 5 & 5S landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { }

iPhone 5 & 5S portrait
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) { }

iPhone 2G, 3G, 4, 4S Media Queries (also iPod Touch generations 1-4)

iPhone 2G-4S portrait & landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { }

iPhone 2G-4S landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) { }

iPhone 2G-4S portrait
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) { }

iPhone 5 Resolutions
Screen Width = 320px (CSS Pixels)
Screen Height = 568px (CSS Pixels)
Screen Width = 640px (Actual Pixels)
Screen Height = 1136px (Actual Pixels)

iPhone 4/4S Resolutions
Screen Width = 320px (CSS Pixels)
Screen Height = 480px (CSS Pixels)
Screen Width = 640px (Actual Pixels)
Screen Height = 960px (Actual Pixels)

Screen Width = 320px (CSS Pixels)
Screen Height = 480px (CSS Pixels)
Screen Width = 320px (Actual Pixels)
Screen Height = 480px (Actual Pixels)