cssiosiphonemedia-queries

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.


Solution

  • 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)