与苹果的新设备相对应的CSS媒体查询是什么？我需要设置body的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/

以下是一些针对iphone的媒体查询。这是参考链接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 */
        @media only screen and (min-device-width: 375px) and (max-device-height: 812px) 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) { }

我注意到，这里的答案是使用：device-width，device-height，min-device-width，min-device-height，max-device-width，max-device-height。

由于它们已被弃用，请不要使用它们。请参阅MDN以获取参考。而是使用常规的min-width，max-width依此类推。为了进一步保证，您可以将最小值和最大值设置为相同的px值。例如：

iPhone X

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

您可能还会注意到，我使用的是635px的高度。自己尝试，窗口高度实际上是635px。运行适用于iPhone X的iOS模拟器，并在Safari Web检查器中执行window.innerHeight。以下是有关此主题的一些有用链接：

• https://medium.com/@hacknicity/how-ios-apps-adapt-to-the-iphone-x-screen-size-a00bd109bbb9
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
• https://ivomynttinen.com/blog/ios-design-guidelines
• https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

似乎使用env（）为iPhone X / 8添加填充的最准确（且无缝）的方法...

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

这是描述此内容的链接：

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

如果您的页面meta[@name="viewport"]在其DOM中缺少元素，则可以使用以下内容来检测移动设备：

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

如果要避免像所有移动浏览器一样将视口设置为980px的台式机使用假阳性，则device-width还可以在组合中添加一个测试：

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

根据https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries中的列表，新hover属性似乎是检测您是否拥有移动设备的最后一种新方法那确实不合适hover; 它仅在2018年随Firefox 64（2018）引入，尽管自2016年以来受Android Chrome 50（2016）甚至自2014年以来受Chrome 38（2014）的支持：

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/hover