iPhone X / 8/8 Plus CSS媒体查询

Question

苹果新设备对应的CSS媒体查询是什么？我需要设置body的background-color改变X的安全区域的背景颜色。

Answer 1

@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 +具有相同的尺寸，而iPhone 7/8也具有相同的尺寸。

寻找特定方向？

肖像

添加以下规则：

    and (orientation : portrait)

景观

添加以下规则：

    and (orientation : landscape)