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