时间戳

首页 > 解决方案 > iPhone 13（Pro、Max、Mini）和旧款 iPhone 的所有媒体查询

css - 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。

标签： cssiosiphonemedia-queries

解决方案

适用于 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 专业版

/* 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 专业版

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

推荐阅读