All media queries for iPhone 13 (Pro, Max, Mini) and older iPhones(针对iPhone 13(Pro、Max、Mini)和旧版iPhone的所有媒体查询)

本文介绍了针对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 mini、iPhone 12 mini、iPhone 11 Pro、iPhone Xs和iPhone X

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 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 Pro

/* 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 13(Pro、Max、Mini)和旧版iPhone的所有媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！