iPhone XR / XS / XS Max CSS 媒体查询

Question

用于针对 Apple 2018 年设备的正确 CSS 媒体查询是什么：iPhone XR/XS/XS Max？

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

Answer 1

iPhone XR

 /* 1792x828px at 326ppi */
@media only screen
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 2) { }

---

iPhone XS

 /* 2436x1125px at 458ppi */
@media only screen
    and (device-width : 375px)
    and (device-height : 812px)
    and (-webkit-device-pixel-ratio : 3) { }

---

iPhone XS 最大

/* 2688x1242px at 458ppi */
@media only screen
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 3) { }

---

寻找特定的方向？

肖像

添加以下规则：

     and (orientation : portrait)

景观

添加以下规则：

     and (orientation : landscape)

参考：

• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
• https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

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