所有针对iPhone 15（Pro，Max，Plus，Mini）以及旧款机型的媒体查询

Question

所有针对iPhone 15（Pro，Max，Plus，Mini）以及旧款机型的媒体查询

cssiosiphonemedia-queries

50

什么是用于定位苹果最新设备的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。

2023年设备：iPhone 15、iPhone 15 Plus、iPhone 15 Pro和iPhone 15 Pro Max。

- Ruud

2个回答

4

对于那些希望在2023年获得更新版本的iPhone 14的人：

/*iPhone 14*/
@media only screen
and (width: 390px) 
and (device-height: 844px)
and (-webkit-device-pixel-ratio: 3) { }

/*iPhone 14 Pro*/
@media only screen
    and (width: 393px) 
    and (device-height: 852px)
    and (-webkit-device-pixel-ratio: 3) { }

/*iPhone 14 Pro Max*/
@media only screen
    and (device-width: 430px) 
    and (device-height: 932px) 
    and (-webkit-device-pixel-ratio: 3) { }

- Leo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ruud · Accepted Answer

适用于iPhone 11、12、13、14和15

在这里，您将找到适用于所有iPhone的媒体查询。大多数媒体查询会针对多个设备。

iPhone 15和15 Pro

适用于iPhone 14 Pro、iPhone 15和iPhone 15 Pro：

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

iPhone 15 Plus和15 Pro Max

针对iPhone 14 Pro Max、iPhone 15 Plus和iPhone 15 Pro Max：

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

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 13 Mini

适用于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（第1至第3代）：

/* 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)