cssmedia-queriesiphone-xiphone-8iphone-8-plus

iPhone X / 8 / 8 Plus CSS media queries

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.

Solution

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