iPhone 13（Pro、Max、Mini）和旧款 iPhone 的所有媒体查询

Posted 2023-03-06

【中文标题】iPhone 13（Pro、Max、Mini）和旧款 iPhone 的所有媒体查询

【英文标题】：All media queries for iPhone 13 (Pro, Max, Mini) and older iPhones

【发布时间】：2020-01-24 23:59:42

【问题描述】：

针对 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。

【参考方案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 mini、iPhone 12 mini、iPhone 11 Pro、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 Pro

---

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 13 Pro Max 和 iPhone 12 Pro Max

---

旧款 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 和 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 mini、iPhone 12 mini、iPhone 11 Pro、iPhone Xs 和 iPhone X

---

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 11 Pro Max 和 iPhone Xs Max

---

设备方向

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

纵向：

and (orientation: portrait) 

横向：

and (orientation: landscape) 

【讨论】：

对我有用的 iPhone 11 媒体查询如下.. @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2)

这是包括顶部的栏，还是排除它？

iphone 12 mini 水平方向为 1080 像素。与通常的设备像素比为 3，它可以是 360 像素，就像大多数 android 手机一样，使其成为有史以来最兼容的分辨率。苹果显然将像素映射到 375，这让我很困扰！感谢媒体查询。

有没有免费的工具可以模拟iphone 12 max pro的显示？我尝试将其设置在具有上述尺寸的 Firefox 中，但它的显示方式与实际设备不同。

device-width 和 device-heigh 已弃用。只需将它们替换为 width 和 height 即可，上述规则应按预期工作。