Skip to main content
Web Design

CSS Media Queries for Apple Devices

By September 5, 2018October 19th, 2022No Comments
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 */ }

Recent Posts

Web Design
October 13, 2022

Internet Explorer Support

We usually get asked why we don't support Internet Explorer and the main reason behind this is that only 1.8% of internet users are IE users and it is very…
Importance of EcommerceShopifyWeb DesignWordpress
April 11, 2020

Importance of eCommerce

With the increasing need for eCommerce, every businessman is looking to have an online store where they can sell their range of products and services. There are so many benefits…
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…