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.
2022 devices: iPhone 14, iPhone 14 Plus, iPhone 14 Pro and iPhone 14 Pro Max.
2023 devices: iPhone 15, iPhone 15 Plus, iPhone 15 Pro and iPhone 15 Pro Max.
Here you'll find a media query for all iPhones. Most media queries target multiple devices.
For iPhone 14 Pro, iPhone 15 and iPhone 15 Pro:
/* 1179×2556 pixels at 460ppi */
@media only screen
and (width: 393px)
and (height: 852px)
and (-webkit-device-pixel-ratio: 3) { }
For iPhone 14 Pro Max, iPhone 15 Plus and iPhone 15 Pro Max:
/* 1284×2778 pixels at 460ppi */
@media only screen
and (width: 430px)
and (height: 932px)
and (-webkit-device-pixel-ratio: 3) { }
For iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, and iPhone 14:
/* 1170×2532 pixels at 460ppi */
@media only screen
and (width: 390px)
and (height: 844px)
and (-webkit-device-pixel-ratio: 3) { }
For iPhone 12 Pro Max, iPhone 13 Pro Max, and iPhone 14 Plus:
/* 1284×2778 pixels at 458ppi */
@media only screen
and (width: 428px)
and (height: 926px)
and (-webkit-device-pixel-ratio: 3) { }
For iPhone X, iPhone Xs, iPhone 11 Pro, iPhone 12 Mini, and iPhone 13 Mini:
/* 1080×2340 pixels at 476ppi */
@media only screen
and (width: 375px)
and (height: 812px)
and (-webkit-device-pixel-ratio: 3) { }
For iPhone XR, and iPhone 11:
/* 828×1792 pixels at 326ppi */
@media only screen
and (width: 414px)
and (height: 896px)
and (-webkit-device-pixel-ratio: 2) { }
For iPhone Xs Max, and iPhone 11 Pro Max:
/* 1242×2688 pixels at 458ppi */
@media only screen
and (width: 414px)
and (height: 896px)
and (-webkit-device-pixel-ratio: 3) { }
For iPhone 7 (2016), iPhone 8 (2017), and iPhone SE (1st to 3rd gen):
/* 750×1334 pixels at 326ppi */
@media only screen
and (width: 375px)
and (height: 667px)
and (-webkit-device-pixel-ratio: 2) { }
Note: The height attribute is indicative because Safari, Chrome, and other browsers reduce the visible area. Remove it from the media query for proper use in browsers.
Use the following code to add landscape or portrait orientation:
and (orientation: portrait)
and (orientation: landscape)