iPhone所有手机型号屏幕尺寸及H5的CSS适配

CSS适配主要屏幕

默认是iPhone X以后型号，只需要给iPhone6及6 plus、电脑定义适配即可：

/* iphone 6 */
@media only screen
    and (device-width : 375px)
    and (device-height : 603px)
    /* and (device-height : 603px) 测试时（微信里） */
    /* and (device-height : 667px) 实际发布时 */
    and (-webkit-device-pixel-ratio: 2) {
        .tips-save {bottom: 20px;}
}
/* iPhone 6/7/8 plus */
@media only screen
    and (device-width: 414px)
    and (device-height: 672px)
    /* and (device-height: 672px) 测试时（微信里） */
    /* and (device-height: 736px) 实际发布时 */
    and (-webkit-device-pixel-ratio: 3) {
        .tips-save {bottom: 20px;}
}

/* 电脑浏览器显示竖版 */
@media (min-width: 992px){
    body {
        width:56vh;
        margin: 0 auto;
    }
}

 

chrome模拟微信里的尺寸设置

iPhone 6

iPhone 6 plus

iPhone 11

 

屏幕尺寸资料

来自：https://www.jianshu.com/p/f0addfce5d2e

手机型号	尺寸（对角线）	物理点	宽长比例	像素点	倍数	状态栏高度	底部安全距离	导航栏高度	tabbar高度
iPhone 4/4S	3.5英寸	320x480	0.667	640x960	@2x	20	-	44	49
iPhone 5/5S/5C	4英寸	320x568	0.563	640x1136	@2x	20	-	44	49
iPhone SE	4英寸	320x568	0.563	640x1136	@2x	20	-	44	49
iPhone 6	4.7英寸	375x667	0.562	750x1334	@2x	20	-	44	49
iPhone 6 Plus	5.5英寸	414x736	0.563	1242x2208	@3x	20	-	44	49
iPhone 6S	4.7英寸	375x667	0.562	750x1334	@2x	20	-	44	49
iPhone 6S Plus	5.5英寸	414x736	0.563	1242x2208	@3x	20	-	44	49
iPhone 7	4.7英寸	375x667	0.562	750x1334	@2x	20	-	44	49
iPhone 7 Plus	5.5英寸	414x736	0.563	1242x2208	@3x	20	-	44	49
iPhone 8	4.7英寸	375x667	0.562	750x1334	@2x	20	-	44	49
iPhone 8 Plus	5.5英寸	414x736	0.563	1242x2208	@3x	20	-	44	49
iPhone X	5.8英寸	375x812	0.462	1125x2436	@3x	44	34	44	83
iPhone XS	5.8英寸	375x812	0.462	1125x2436	@3x	44	34	44	83
iPhone XS Max	6.5英寸	414x896	0.462	1242x2688	@3x	44	34	44	83
iPhone XR	6.1英寸	414x896	0.462	828x1792	@2x	44	34	44	83
iPhone 11	6.1英寸	414x896	0.462	828x1792	@2x	44	34	44	83
iPhone 11 Pro	5.8英寸	375x812	0.462	1125x2436	@3x	44	34	44	83
iPhone 11 Pro Max	6.5英寸	414x896	0.462	1242x2688	@3x	44	34	44	83
iPhone SE 2020款	4.7英寸	375x667	0.562	750x1334	@2x	20	-	44	49
iPhone 12 mini	5.4英寸	360x780	0.461	1080 x 2340	@3x	44	-	44	49
iPhone 12	6.1英寸	390x844	0.462	1170 x 2532	@3x	44	-	44	49
iPhone 12 Pro	6.1英寸	390x844	0.462	1170 x 2532	@3x	44	-	44	49
iPhone 12 Pro Max	6.7英寸	428x926	0.462	1284 x 2778	@3x	44	-	44	49