iPhone X / 8 / 8 Plus CSS media queries

Question

What are the CSS media queries corresponding to Apple's new devices ? I need to set the body's background-color to change the X's safe area background color.

score 161 · Accepted Answer · edited Oct 13 '17 at 12:13

iPhone X

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

iPhone 8

@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) { }

iPhone 8 Plus

@media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3) { }

iPhone 6+/6s+/7+/8+ share the same sizes, while the iPhone 7/8 also do.

Looking for a specific orientation ?

Portrait

Add the following rule:

    and (orientation : portrait)

Landscape

Add the following rule:

    and (orientation : landscape)

References:

http://viewportsizes.com/mine/ reports 320 x 450 for iPhone 8. Also reports: `Mozilla/5.0 (iPhone; CPU iPhone OS 12_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1`. — Adrian, Oct 27 '18 at 15:47

score 91 · Answer 2 · edited Nov 03 '22 at 22:08

Here are some of the following media queries for iPhones. Here is the ref link https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

        /* iphone 3 */
        @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }
        
        /* iphone 4 */
        @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }
        
        /* iphone 5 */
        @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }
        
        /* iphone 6, 6s, 7, 8 */
        @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
            
        /* iphone 6+, 6s+, 7+, 8+ */
        @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }
        
        /* iphone X , XS, 11 Pro, 12 Mini */
        @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

        /* iphone 12, 12 Pro */
        @media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) { }
       
        /* iphone XR, 11 */
        @media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 2) { }
            
        /* iphone XS Max, 11 Pro Max */
        @media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3) { }

        /* iphone 12 Pro Max */
        @media only screen and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-device-pixel-ratio: 3) { }

You should add references, eg: Links to other SO answers if you copied them. — nathan, Dec 12 '17 at 04:49

Sam Sedighian · Answer 3 · 2022-08-26T17:10:17.067

I noticed that the answers here are using: device-width, device-height, min-device-width, min-device-height, max-device-width, max-device-height.

Please refrain from using them since they are deprecated. see MDN for reference. Instead use the regular min-width, max-width and so on. For extra assurance, you can set the min and max to the same px amount. For example:

iPhone X

@media only screen 
    and (width : 375px) 
    and (height : 812px)
    and (orientation : portrait)  
    and (-webkit-device-pixel-ratio : 3) { }

Here are a few useful links on this subject:

This is the ONLY method working, all others above, even CSS tricks are wrong, using the methods like Yash Vakeria or Josh works but they also get called on Iphone 6-7-8. BUT ! DO use the 812px instead of the mentionned 635px, the chrome inspector tool did not catch it as mentionned by Sam... — Renegade_Mtl, May 07 '19 at 18:02

score 4 · Answer 4 · edited Dec 08 '18 at 00:22

4

It seems that the most accurate (and seamless) method of adding the padding for iPhone X/8 using env()...

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

Here's a link describing this:

https://css-tricks.com/the-notch-and-css/

edited Dec 08 '18 at 00:22

nathan

9,329
4
37
51

answered Dec 07 '18 at 22:33

wasif.io

49
5

Hi Wasif, try and put ` ` around your code for nicer formatting. – Alan Scarpa Dec 07 '18 at 23:01
Unfortunately, this is going to apply the padding on iPhone 6 as well, at least it does in the simulator. And that's undesired. – emil.c Jul 12 '19 at 13:47

score 1 · Answer 5 · answered Sep 09 '19 at 05:05

If your page is missing meta[@name="viewport"] element within its DOM, then the following could be used to detect a mobile device:

@media only screen and (width: 980px), (hover: none) { … }

If you want to avoid false-positives with desktops that just magically have their viewport set to 980px like all the mobile browsers do, then a device-width test could also be added into the mix:

@media only screen and (max-device-width: 800px) and (width: 980px), (hover: none) { … }

Per the list at https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries, the new hover property would appear to be the final new way to detect that you've got yourself a mobile device that doesn't really do proper hover; it's only been introduced in 2018 with Firefox 64 (2018), although it's been supported since 2016 with Android Chrome 50 (2016), or even since 2014 with Chrome 38 (2014):

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

iPhone X / 8 / 8 Plus CSS media queries

5 Answers5

iPhone X

iPhone 8

iPhone 8 Plus

Linked