iPhone系列最全（包括iPhone14系列以及15系列）safearea、分辨率及媒体查询

前言

最近做前端，设计提出对屏幕适配特殊要求，闲暇时间总结了一下！

根据现有iPhone公布的iPhone参数信息以下汇总了目前iPhone系列详细各种参数，包括iPhone14系列以及即将发售的iPhone15系列各种参数（如有错误敬请指正）。

特别注意：iPhone14Pro、iPhone15Pro、iPhone14ProMax、iPhone15ProMax状态栏高度和sageArea顶部安全距离不一致，适配位置特别注意！

一、屏幕尺寸参数

手机型号	尺寸（pt)	倍数	屏幕（px）	状态栏高度	顶部安全距离	底部安全距离
iPhone14Pro、iPhone15Pro、iPhone15	393 * 852	3	1179 * 2556	54pt	59pt	34pt(竖屏) / 21pt(横屏)
iPhone14ProMax、iPhone15ProMax 、iPhone15Plus	430 * 932	3	1290 * 2796	54pt	59pt	34pt(竖屏) / 21pt(横屏)
iPhone12、iPhone12Pro、iPhone13、iPhone13Pro、iPhone14	390 * 844	3	1170 * 2532	47pt	47pt	34pt(竖屏) / 21pt(横屏)
iPhone12ProMax、iPhone13ProMax、iPhone14Plus	428 * 926	3	1284 * 2778	47pt	47pt	34pt(竖屏) / 21pt(横屏)
iPhone12mini、iPhone13mini	375 * 812	3	1125 * 2436	50pt	50pt	34pt(竖屏) / 21pt(横屏)
iPhoneXS Max、iPhone11ProMax	414 * 896	3	1242 * 2688	44pt	44pt	34pt(竖屏) / 21pt(横屏)
iPhoneX、iPhoneXS、iPhone 11 Pro	375 * 812	3	1125 * 2436	44pt	44pt	34pt(竖屏) / 21pt(横屏)
iPhoneXR、iPhone 11	414 * 896	2	828* 1792	48pt	48pt	34pt(竖屏) / 21pt(横屏)
iPhone6 Plus、iPhone6s Plus、iPhone7 Plus、iPhone8 Plus	414 * 736	3	1242x2208	20pt	20pt	---
iPhone6、iPhone6s、iPhone7、iPhone8、iPhoneSE2、iPhoneSE3	375 * 667	2	750 * 1334	20pt	20pt	---

二、媒体查询

```    //iphoneX、iphoneXs、iphone11pro、iphone 12mini、iphone13min
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
        @content;
    }
    // iphoneXSmax、 iphone11promax
    @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
        @content;
    }
    // iphoneXR、iphone11
    @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
        @content;
    }
    // iphone 12 /12 pro/ 14
    @media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio:3) {
        @content;
    }
    // iphone 12promax/ 13promax / 14plus
    @media only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio:3) {
        @content;
    }
    // iphone 14pro /15pro / 15
    @media only screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio:3) {
        @content;
    }
    // iphone 14 pro max /15pro max /15plus
    @media only screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio:3) {
        @content;
    }