iPhone 13（Pro、Max、Mini）和更早 iPhones 的所有媒体查询

All media queries for iPhone 13 (Pro, Max, Mini) and older iPhones

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

对于 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 和 iPhoneX

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

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 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 和 iPhoneX

iPhone 11 专业最大

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