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

查看:70
本文介绍了针对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的所有媒体查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆