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

Question

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

- nathan

Answer 1

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/

- nathan

---

我的iPhone 8+上安装的iOS 12系统遇到了iPhone X的查询。 - user1415066

http://viewportsizes.com/mine/ 报告 iPhone 8 的尺寸为320 x 450。同时报告了以下信息：Mozilla/5.0 (iPhone; CPU iPhone OS 12_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1。 - Adrian

iPhone 8 Plus在Chrome中的媒体查询至少不起作用。 - Talha Meh

Answer 2

以下是适用于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) { }

- Yash Vekaria

---

你应该添加引用，例如：如果你复制了其他SO答案，就要加上链接。 - nathan

我的iPhone 8+运行iOS 12系统时遭遇了iPhone X的查询。 - user1415066

@GlennG 我已经更新了我的回答，也更新了问题 ;) - Yash Vekaria

Answer 3

我注意到这里的答案都在使用：device-width、device-height、min-device-width、min-device-height以及max-device-width、max-device-height。

请不要再使用它们，因为它们已被废弃。请参考MDN。相反，请使用常规的min-width、max-width等属性。为了增加保障，您可以将最小值和最大值设置为相同的像素数。例如：

iPhone X

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

以下是一些关于这个主题的有用链接：

• 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

- Sam Sedighian

---

这是唯一可行的方法，所有其他方法都不正确，即使使用 CSS 技巧也不行。使用像 Yash Vakeria 或 Josh 这样的方法可以实现，但它们也会在 iPhone 6-7-8 上调用。但是！请使用 812px 而不是提到的 635px，Chrome 检查工具没有捕捉到它，如 Sam 所述... - Renegade_Mtl

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

- wasif.io

---

嗨，Wasif，请尝试在您的代码周围加上 以获得更好的格式。 - Alan Scarpa

不幸的是，这也会在iPhone 6上应用填充，至少在模拟器中是这样。而这是不期望的。 - emil.c

Answer 5

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

@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的最终新方法；它在Firefox 64（2018年）中才被引入，虽然自2016年以来就已经得到Android Chrome 50（2016年）的支持，甚至自2014年以来就已经得到Chrome 38（2014年）的支持。

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

- cnst