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

Question

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

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 加

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

Answer 2

以下是针对 iPhone 的一些媒体查询。这是参考 link 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) { }

Answer 3

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

请不要使用它们，因为它们已被弃用。参见 MDN for reference。而是使用常规的 min-width、max-width 等。为了额外保证，您可以将最小值和最大值设置为相同的像素数量。 例如：

iPhone X

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

您可能还注意到我使用 635px 作为高度。自己试一下 window 高度实际上是 635px。 运行 iOS iPhone X 模拟器和 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

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

这里有一个 link 描述：

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

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；它仅在 2018 年随 Firefox 64（2018）推出，尽管自 2016 年以来 Android Chrome 50（2016），甚至自 2014 年以来 Chrome 38（2014）都支持它：

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