CODEWITHSUNDEEP
cssiosiphonemedia-queries
Ruud
Ruud

Reputation: 2650

All media queries for iPhone 15 (Pro, Max, Plus, Mini) and older ones

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.

Upvotes: 51

Views: 134716

Answers (2)

Ruud
Ruud

Reputation: 2650

For iPhone 11, 12, 13, 14 and 15

Here you'll find a media query for all iPhones. Most media queries target multiple devices.

iPhone 15 and 15 Pro

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

iPhone 15 Plus and 15 Pro Max

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

iPhone 14

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

iPhone 14 Plus

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

iPhone 13 Mini

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

iPhone 11

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

iPhone 11 Pro Max

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

iPhone SE

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

Device height

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.

Device orientation

Use the following code to add landscape or portrait orientation:

For portrait:

and (orientation: portrait)

For landscape:

and (orientation: landscape)

Upvotes: 131

Leo
Leo

Reputation: 1027

For those looking for updated versions of iPhone 14 in 2023:

/*iPhone 14*/
@media only screen
and (width: 390px) 
and (device-height: 844px)
and (-webkit-device-pixel-ratio: 3) { }

/*iPhone 14 Pro*/
@media only screen
    and (width: 393px) 
    and (device-height: 852px)
    and (-webkit-device-pixel-ratio: 3) { }

/*iPhone 14 Pro Max*/
@media only screen
    and (device-width: 430px) 
    and (device-height: 932px) 
    and (-webkit-device-pixel-ratio: 3) { }

Upvotes: 4

Related Questions