伴随着苹果发布的机型越来越多,随之而来的适配问题也不容忽视,而在iOS开发中难免需要UI切一些背景图,其中包括导航栏、状态栏、tabar等,这时候如果UI切的尺寸不对就很难受,可能显示不出来,因此需要我们把准确的尺寸给到UI;
iPhone背景图一般需要包括全屏幕背景、顶部栏背景和底部栏背景。
顶部栏包括导航栏、状态栏
底部栏包括Tabbar和安全区域(safe area)
223.jpg
全屏背景不用说直接参考下表格屏幕宽高即可;
机型
屏幕宽高(px)
导航栏高[竖屏]
导航栏高[横屏]
状态栏高[竖屏]
状态栏高[横屏]
Tabbar高[竖屏]
Tabbar高[横屏]
底部安全距离[竖屏]
底部安全距离[横屏]
计算倍数
iPhone4
640*960
44
32
20
20
49
32
0
0
@2x
iPhone5/5s/5/SE
640*1136
44
32
20
20
49
32
0
0
@2x
iPhone6/7/8
750*1334
44
32
20
20
49
32
0
0
@2x
iPhone6/7/8Plus
1080*1920
44
44
20
20
49
49
0
0
@3x
iPhoneX/XS/iPhone11Pro
1125*2436
44
44
44
0
49
32
34
21
@3x
iPhoneXR/11
828*1792
44
44
48
0
49
49
34
21
@3x
iPhoneXSMAX/11ProMAX
1242*2688
44
44
47
0
49
32
34
21
@3x
iPhone12/13/14/15/12Pro/13Pro
1170*2532
44
44
47
0
49
32
34
21
@3x
iPhone12Mini/13Mini
1080*2340
44
44
47
0
49
49
34
21
@3x
iPhone12ProMAX/13ProMAX/14Plus
1284*2778
44
44
47
0
49
49
34
21
@3x
iPhone14Pro/15Pro
1179*2556
44
44
59
0
49
32
34
21
@3x
iPhone14ProMAX/15ProMAX/15Plus
1290*2796
44
44
59
0
49
49
34
21
@3x
我们以IPhone12为例:
一、竖屏
顶部栏
顶部栏高度计算公式为:
(状态栏高+导航栏高)x倍数
高H = (47+44)x3 = 264(px);
宽即手机屏幕宽度,所以IPhone12顶部栏需要UI切 273x1170(px)尺寸的切图;
底部栏
底部栏高度计算公式为:高H = (Tabbar高+安全距离)x倍数
高H = (34+83)x3 = 351(px)
宽即手机屏幕宽度,所以IPhone12底部栏需要UI切 351x1170(px)尺寸的切图;
二、横屏
顶部栏:
高H = (44+0)x3 = 132;
横屏IPhone12顶部栏需要UI切132x2592(px);
底部栏:
高H = (32+21)x3 = 159;
横屏IPhone12底部栏需要UI切159x2592(px);
有问题欢迎留言,新机型会持续更新