css - iPhone 14(Pro、Max、Plus、Mini)及旧款的所有媒体查询

标签 css ios iphone media-queries

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

2022 年设备:iPhone 14、iPhone 14 Plus、iPhone 14 Pro 和 iPhone 14 Pro Max。

最佳答案

适用于 iPhone 11、12、13 和 14

您可以在此处找到适用于所有 iPhone 的媒体查询。大多数媒体查询都针对多个设备。

iPhone 14

对于 iPhone 12、iPhone 12 Pro、iPhone 13、iPhone 13 Pro 和 iPhone 14:

/* 1170×2532 pixels at 460ppi */
@media only screen 
    and (width: 390px) 
    and (height: 844px) 
    and (-webkit-device-pixel-ratio: 3) { }
<小时/>

iPhone 14 Plus

对于 iPhone 12 Pro Max、iPhone 13 Pro Max 和 iPhone 14 Plus:

/* 1284×2778 pixels at 458ppi */
@media only screen 
    and (width: 428px) 
    and (height: 926px) 
    and (-webkit-device-pixel-ratio: 3) { }
<小时/>

iPhone 14 Pro

iPhone 14 Pro 的独特之处:

/* 1179×2556 pixels at 460ppi */
@media only screen 
    and (width: 393px) 
    and (height: 852px) 
    and (-webkit-device-pixel-ratio: 3) { }
<小时/>

iPhone 14 Pro Max

iPhone 14 Pro Max 的独特之处:

/* 1284×2778 pixels at 460ppi */
@media only screen 
    and (width: 430px) 
    and (height: 932px) 
    and (-webkit-device-pixel-ratio: 3) { }
<小时/>

iPhone 13 迷你

对于 iPhone X、iPhone Xs、iPhone 11 Pro、iPhone 12 Mini 和 iPhone 13 Mini:

/* 1080×2340 pixels at 476ppi */
@media only screen 
    and (width: 375px) 
    and (height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }
<小时/>

iPhone 11

对于 iPhone XR 和 iPhone 11:

/* 828×1792 pixels at 326ppi */
@media only screen 
    and (width: 414px) 
    and (height: 896px) 
    and (-webkit-device-pixel-ratio: 2) { }
<小时/>

iPhone 11 Pro Max

对于 iPhone Xs Max 和 iPhone 11 Pro Max:

/* 1242×2688 pixels at 458ppi */
@media only screen 
    and (width: 414px) 
    and (height: 896px) 
    and (-webkit-device-pixel-ratio: 3) { }
<小时/>

iPhone SE

对于 iPhone 7 (2016)、iPhone 8 (2017) 和 iPhone SE(第一代至第三代):

/* 750×1334 pixels at 326ppi */
@media only screen 
    and (width: 375px) 
    and (height: 667px) 
    and (-webkit-device-pixel-ratio: 2) { }
<小时/>

设备高度

注意:高度属性是指示性的,因为 Safari、Chrome 和其他浏览器会缩小可见区域。将其从媒体查询中删除,以便在浏览器中正确使用。

设备方向

使用以下代码添加横向或纵向方向:

对于肖像:

and (orientation: portrait)

对于风景:

and (orientation: landscape)

关于css - iPhone 14(Pro、Max、Plus、Mini)及旧款的所有媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58087446/

相关文章:

javascript - 群组连接后爆炸回复

ios - 提交后出现 Apple Watch 图标问题

iphone - 在 UIViewController 之间传递数据时获取 (null)

ios - 我的 iOS 应用程序持续崩溃,无法找到它

iphone - 为 deviceMotionUpdateInterval 设置的更新频率是实际频率吗?

javascript - 移动网络应用程序上的语音记录

iphone - Objective-C : Start an object on a background thread -- interact as usual?

Css 动画不能只在 chrome 下工作

css - 百分比填充不适用于 float 列表项

html - 背景图像显示图像的特定部分