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

Question

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

原文由 nathan 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 ⁷⁄₈ 也一样。

---

寻找特定的方向？

肖像

添加以下规则：

     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 发布，翻译遵循 CC BY-SA 3.0 许可协议