本教程将介绍针对iPhone 13(Pro、Max、Mini)和旧版iPhone的所有媒体查询的处理方法，这篇教程是从别的地方看到的，然后加了一些国外程序员的疑问与解答，希望能对你有所帮助，好了，下面开始学习吧。

问题描述

针对Apple最新设备的CSS媒体查询有哪些？

2019年设备：iPhone 11、iPhone 11 Pro和iPhone 11 Pro Max。

2020台设备：iPhone 12 mini、iPhone 12、iPhone 12 Pro和iPhone 12 Pro Max。

2021设备：iPhone 13 mini、iPhone 13、iPhone 13 Pro和iPhone 13 Pro Max。

推荐答案

适用于iPhone12和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 13 Pro

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

iPhone 13 Pro Max

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

旧版iPhone(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 Pro

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

iPhone 11 Pro Max

/* 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) 

好了关于针对iPhone 13(Pro、Max、Mini)和旧版iPhone的所有媒体查询的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。