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
Legal Landscape of Newsletters: Key Considerations for Compliance
Legal Landscape of Newsletters: Key Considerations for Compliance
Creating and distributing newsletters can be an effective way to engage with your audience, share updates, and promote your products or services. However, there are legal considerations to keep in…
Lincoln Collective Design & Development Studio
Lincoln Collective Design & Development Studio
Introduction In the digital age, a strong online presence is crucial for the success of small businesses and startups. At Lincoln Collective, we understand the unique challenges these businesses face…
Top 5 Web Design Trends to Boost Your Online Presence in 2024
Top 5 Web Design Trends to Boost Your Online Presence in 2024
Introduction In the fast-evolving digital landscape, staying updated with the latest web design trends is crucial for maintaining a competitive edge. An up-to-date and visually appealing website can significantly enhance…
How to Effectively Rebrand Your Business: A Step-by-Step Guide
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…
The Importance of Typography in Design
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,…
The ROI of Investing in Quality Graphic Design
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,…
