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 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) { }

型

设备高度

**注意：**height属性是指示性的，因为Safari、Chrome等浏览器会缩小可见区域。将其从媒体查询中删除，以便在浏览器中正确使用。

设备方向

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

肖像：

and (orientation: portrait)

型

对于景观：

and (orientation: landscape)

型

对于那些在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) { }

字符串