什么是iPhone 11/11 Pro / 11 Pro Max媒体查询

Question

用于定位Apple 2019设备的正确CSS媒体查询是什么？

iPhone 11，iPhone 11 Pro和iPhone 11 Pro Max。

Answer 1

iPhone 11

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

此媒体查询还适用于：iPhone XR

---

iPhone 11 Pro

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

此媒体查询还适用于：iPhone X和iPhone Xs

---

iPhone 11 Pro Max

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

此媒体查询还适用于：iPhone Xs Max

---

设备方向

要添加横向或纵向，请使用以下代码：

对于肖像：

and (orientation : portrait) 

对于风景：

and (orientation : landscape)