iPhone X / 8 / 8 Plus CSS media queries

Question

iPhone X

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

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

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

https://webkit.org/blog/7929/designing-websites-for-iphone-x/
https://developer.apple.com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout/
https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
https://mydevice.io/devices/
http://viewportsizes.com/mine/