适用于iPhone 12(Pro，Max，Mini)和旧版iPhone的所有媒体查询 [英] All media queries for iPhone 12 (Pro, Max, Mini) and older iPhones

问题描述

针对Apple的2019和2020设备的CSS媒体查询是什么?

What are the CSS media queries to target Apple's 2019 and 2020 devices?

2019年:iPhone 11，iPhone 11 Pro和iPhone 11 Pro Max.

2019: iPhone 11, iPhone 11 Pro and iPhone 11 Pro Max.

2020年:iPhone 12 Mini，iPhone 12，iPhone 12 Pro和iPhone 12 Pro Max.

2020: iPhone 12 Mini, iPhone 12, iPhone 12 Pro and iPhone 12 Pro Max.

推荐答案

iPhone 12 Mini

/* 2340x1080 pixels at 476ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }

此媒体查询适用于:iPhone 12 Mini，iPhone 11 Pro，iPhone Xs和iPhone X

/* 2532x1170 pixels at 460ppi */
@media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3) { }

此媒体查询适用于:iPhone 12和iPhone 12 Pro

/* 2778x1284 pixels at 458ppi */
@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) { }

---

iPhone 11

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

此媒体查询适用于:iPhone 11和iPhone XR

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

此媒体查询适用于:iPhone 12 Mini，iPhone 11 Pro，iPhone Xs和iPhone X

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

此媒体查询适用于:iPhone 11 Pro Max和iPhone Xs Max

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

To add landscape or portrait orientation, use the following code:

and (orientation : portrait) 

对于风景:

and (orientation : landscape) 

这篇关于适用于iPhone 12(Pro，Max，Mini)和旧版iPhone的所有媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！