针对iPhone 13 (专业版、Max版、迷你版)和旧版iPhones的所有媒体查询

Question

针对苹果最新设备的CSS媒体查询是什么？

2019设备: iPhone 11、iPhone 11专业版和iPhone 11专业版Max。

2020设备: iPhone 12迷你、iPhone 12、iPhone 12专业版和iPhone 12专业版Max。

2021设备: iPhone 13迷你、iPhone 13、iPhone 13专业版和iPhone 13专业版Max。

Answer 1

对于iPhone 12和13

iPhone 13迷你

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

此媒体查询用于: iPhone 13迷你、iPhone 12迷你、iPhone 11专业版、iPhone Xs和iPhone X

iPhone 13和iPhone 13专业版

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

此媒体查询用于: iPhone 13、iPhone 12和iPhone 12专业版

最大iPhone 13专业版

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

此媒体查询用于: iPhone 13专业版Max和iPhone 12专业版Max

较旧的iPhones (X、Xs、XR和11)

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

iPhone 11专业版

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

此媒体查询用于: iPhone 13迷你、iPhone 12迷你、iPhone 11专业版、iPhone Xs和iPhone X

最大iPhone 11专业版

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

此媒体查询用于: iPhone 11专业版Max和iPhone Xs Max

设备方向

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

对于肖像：

and (orientation: portrait) 

对于景观：

and (orientation: landscape)