質問

Appleの新端末に対応したCSSメディアクエリとは？私は body 's background-color でXのセーフエリアの背景色を変更します。

どのように解決するのですか？

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+はサイズが共通で、iPhone 7/8も同じです。

特定の方向をお探しですか?

ポートレート

以下のルールを追加します。

    and (orientation : portrait) 

風景

以下のルールを追加します。

    and (orientation : landscape) 

参考文献

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