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

DesignGraphic Design
June 13, 2024

How to Effectively Rebrand Your Business: A Step-by-Step Guide

Introduction In the fast-paced world of business, maintaining a strong and relevant brand is crucial for success. Rebranding can breathe new life into your business, helping you stay competitive and…
DesignGraphic Design
June 12, 2024

The Importance of Typography in Design

Introduction Typography is a fundamental aspect of design that often goes unnoticed but plays a critical role in how a message is conveyed and perceived. From readability to brand identity,…
Graphic DesignGraphic Design
June 12, 2024

The ROI of Investing in Quality Graphic Design

Introduction In today’s competitive market, the visual representation of your business can make or break your brand. Quality graphic design plays a pivotal role in building a strong brand identity,…
ShopifyUX/UIWordpress
June 12, 2024

5 Essential Elements of a High-Converting Landing Page

Introduction In the digital age, landing pages are crucial for converting visitors into leads or customers. A well-designed landing page can significantly boost your conversion rates and drive business growth.…
WebFlow SEOWeb Design
May 6, 2024

Webflow is a Strong Contender for SEO-Friendly Website Design

Why Webflow is a Strong Contender for SEO-Friendly Website Design As the digital landscape becomes increasingly competitive, the need for SEO-friendly website design is more crucial than ever. Among the…
Shopify StoreShopifyWeb Design
May 3, 2024

How to Promote Your Newly Launched Shopify Site: A Step-by-Step Guide

How to Promote Your Newly Launched Shopify Site: A Step-by-Step Guide Launching a Shopify site is an exciting step for any business, but the work doesn't stop there. Promotion is…
Start a project