All media queries for iPhone 13 (Pro, Max, Mini) and older iPhones(针对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的所有媒体查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:针对iPhone 13(Pro、Max、Mini)和旧版iPhone的所有媒体查询
基础教程推荐
- Kivy Buildozer 无法构建 apk,命令失败:./distribute.sh -m “kivy"d 2022-01-01
- 如何让对象对 Cocos2D 中的触摸做出反应? 2022-01-01
- 如何在 iPhone 上显示来自 API 的 HTML 文本? 2022-01-01
- 在 gmail 中为 ios 应用程序检索朋友的朋友 2022-01-01
- android 应用程序已发布,但在 google play 中找不到 2022-01-01
- 如何在 UIImageView 中异步加载图像? 2022-01-01
- UIWebView 委托方法 shouldStartLoadWithRequest:在 WKWebView 中等效? 2022-01-01
- 当从同一个组件调用时,两个 IBAction 触发的顺序是什么? 2022-01-01
- 如何在没有IB的情况下将2个按钮添加到右侧的UINavigationbar? 2022-01-01
- Android:对话框关闭而不调用关闭 2022-01-01