All media queries for iPhone 13 (Pro, Max, Mini) and older iPhones

Question

What are the CSS media queries to target Apple's latest devices?

2019 devices: iPhone 11, iPhone 11 Pro and iPhone 11 Pro Max.

2020 devices: iPhone 12 mini, iPhone 12, iPhone 12 Pro and iPhone 12 Pro Max.

2021 devices: iPhone 13 mini, iPhone 13, iPhone 13 Pro and iPhone 13 Pro Max.

Solution

For iPhone 12 and 13

iPhone 13 mini

/* 2340x1080 pixels at 476ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }

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) { }

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) { }

This media query is used for: iPhone 13 Pro Max and iPhone 12 Pro Max

---

Older iPhones (X, Xs, XR and 11)

iPhone 11

/* 1792x828px at 326ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2) { }

This media query is used for: iPhone 11 and iPhone XR

---

iPhone 11 Pro

/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }

This media query is used for: iPhone 13 mini, iPhone 12 mini, iPhone 11 Pro, iPhone Xs, and iPhone X

---

iPhone 11 Pro Max

/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3) { }

This media query is used for: iPhone 11 Pro Max and iPhone Xs Max

---

Device orientation

Use the following code to add landscape or portrait orientation:

For portrait:

and (orientation: portrait) 

For landscape:

and (orientation: landscape) 

Comments

[dkiriakakis]

The iPhone 11 media query that worked for me is the following.. @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2) { }

[Adz]

Does this include the bar at the top, or exclude it?

[avia]

@Ruud thanks for that it was very helpful as a quick ref.

[daghan]

iphone 12 mini has 1080 pixels horizontally. With usual device to pixel ratio as 3, it could be 360 pixels, like most of android phones, making it the most compatible resolution ever. Apple apparently maps pixels to 375 which disturbs me big time! Thanks for the media queries.

[Aljaz]

Is there any free tool where you can simulate the iphone 12 max pro display ? I tried to set it in firefox with dimension above but it doesn't display it same way as the actual device.

[pilot]

device-width and device-heigh are deprecated. Just replace them with width and height and the above rules should work as expected.

[Doomd]

@Aljaz Yes, and the "simulator" that I like best is a chrome extension: chrome.google.com/webstore/detail/responsive-viewer/…