iPhone XR/XS/XS Max CSS媒体查询 [英] iPhone XR / XS / XS Max CSS media queries

问题描述

用于Apple的2018设备的正确CSS媒体查询是什么:iPhone XR/XS/XS Max?

What are the correct CSS media queries used to target Apple's 2018 devices: iPhone XR/XS/XS Max ?

推荐答案

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 Max

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

正在寻找特定的方向吗?

Looking for a specific orientation ?

肖像

添加以下规则:

    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- iPhone分辨率指南

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

这篇关于iPhone XR/XS/XS Max CSS媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！