Skip to main content
Web Design

CSS Media Queries for Apple Devices

By September 5, 2018April 12th, 2020No Comments
css media queries

CSS Media Queries For Apple Devices

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 my 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 */ }

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 */ }

Recent Posts

ArtGraphic DesignVisual ArtsWeb Design
April 9, 2020

Selling Your Work as Merchandise

Selling Your Work as Merchandise: How to Get Started There are many ways to make money as a designer and a creative professional. The internet certainly makes getting clients from…
DesignGraphic Design
March 12, 2020

Choosing the correct font for your next project

The fonts you use can have a surprising impact on how your designs are perceived. The font or typeface can affect how often your content is read and how well…
securing wordpressWeb DesignWordpress
January 10, 2020

Securing WordPress

There are a few ways they can really gain access to your blog. Technology is getting so advanced that a lot of the hackers don’t have to do hacking themselves…
Tutorials
January 3, 2020

Boosting Productivity

Boost Productivity by sticking to the 9 to 5 In the modern world, people wear overworking habits like a badge of honor. However, this does not make you a good…