80

苹果新设备对应的 CSS 媒体查询有哪些？我需要设置body'sbackground-color来更改 X 的安全区域背景颜色。

4

5 回答 5

156

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 加

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



参考：

于 2017-09-20T05:02:50.173 回答
90

以下是 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, 12 Mini */
        @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

        /* iphone 12, 12 Pro */
        @media only screen and (min-device-width: 390px) and (max-device-height: 844px) 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) { }

        /* iphone 12 Pro Max */
        @media only screen and (min-device-width : 428px) and (max-device-height : 926px) and (-webkit-device-pixel-ratio : 3) { }
于 2017-12-12T04:47:59.187 回答
19

我注意到这里的答案使用：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. 以下是有关此主题的一些有用链接：

于 2018-10-26T19:00:20.977 回答
4

似乎使用 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/

于 2018-12-07T22:33:15.900 回答
1

如果您的页面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/en-US/docs/Web/CSS/Media_Queries/Using_media_queries上的列表，新hover属性似乎是检测您是否拥有移动设备的最后一种新方法那确实不太合适hover；它仅在 2018 年与 Firefox 64 (2018) 一起推出，尽管它自 2016 年以来就已支持 Android Chrome 50 (2016)，甚至自 2014 年以来已支持 Chrome 38 (2014)：

于 2019-09-09T05:05:59.600 回答