Css 针对iPhone 12（Pro、Max、Mini）和旧版iPhone的所有媒体查询

针对苹果2019年和2020年设备的CSS媒体查询是什么

2019年：iPhone 11、iPhone 11 Pro和iPhone 11 Pro Max

2020年：iPhone 12 Mini、iPhone 12、iPhone 12 Pro和iPhone 12 Pro Max.

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

---

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

---

iPhone 12 Pro Max

---

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

---

iPhone11Pro 此媒体查询适用于：iPhone 12 Mini、iPhone 11 Pro、iPhone Xs和iPhone X

---

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

---

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

肖像画： 对于景观：

---

对我有效的iphone11媒体查询如下

@media only screen and（设备宽度：375px）和（设备高度：812px）和（-webkit设备像素比率：2）{}

这包括顶部的条形图还是不包括它？@Ruud感谢它的帮助，因为它是一个快速参考。iphone 12 mini水平方向有1080像素。通常的设备像素比为3，它可能是360像素，就像大多数安卓手机一样，使其成为有史以来最兼容的分辨率。苹果显然将像素映射到375，这让我非常不安！谢谢你的媒体查询。有没有免费的工具可以让你模拟iPhone12Max pro的屏幕？我试着在firefox中用上面的维度设置它，但它的显示方式与实际设备不同。

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

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

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

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

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

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