Skip to main content
UX/UIWeb Design

Media Queries for Apple Devices

By September 5, 2018February 1st, 2024No Comments

As a web designer and developer, I often find myself searching for media queries to ensure that websites are optimized for various devices. In an effort to streamline this process, I decided to compile a list of the most frequently used media queries.

Since Apple devices are the most widely used, I have compiled a list of media queries specifically for these devices. I will make sure to keep this list up to date with any new Apple device releases.

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 Media Queries

 iPhone 14 Media Queries

iPhone 14
@media only screen and (width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) { /* STYLES GO HERE */ }
iPhone 14 Pro
@media only screen and (width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) { /* STYLES GO HERE */ }
iPhone 14 Pro Max
@media only screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) { /* STYLES GO HERE */ }

 iPhone 13 Media Queries

iPhone 13 Mini
@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
@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
@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 DesignWordpress
February 5, 2024

Securing Your WordPress Site: Why It Matters in 2024

🔒 Securing Your WordPress Site: Why It Matters in 2024 🔐 Hey WordPress enthusiasts! Let's cut to the chase – website security is non-negotiable, especially in the WordPress realm. Here's…
Web Design
February 1, 2024

The Imperative of Having a Design Website in 2024!

Greetings, design enthusiasts! Step into the future of design with me as we explore why having your own website is more than a trend—it's a design necessity in 2024. 1.…
Web Design
January 18, 2024

Exciting Update: Expanding My Tech-Stack with Webflow!

Sneaky little fact alert! I'm thrilled to announce that I've added Webflow to my ever-growing tech-stack. 🎉 This powerful web design and development platform has opened up a whole new…
Design
December 18, 2023

Embracing the Freelance Journey: Living Life on My Terms!

Hey everyone, it's time for a little update from the freelance front! 🎉 I've been cruising the freelance highway for a few months now, and let me tell you—it's been…
Tutorials
November 18, 2023

Embracing Change: From Retrenchment to Freelance Adventure!

Ever had one of those moments where life takes an unexpected turn, leading you down a path you never imagined? Well, that's exactly what happened to me when I got…
ux writerTutorialsUX/UI
October 9, 2023

5 Dependable UX Writing Tips & Strategies I Wish I Knew Earlier

As a UX writer, I've learned several valuable tips and strategies along the way that have greatly enhanced my effectiveness in creating user-centred and engaging content. Here are five dependable…