iOS 屏幕适配知识整理

1.1 屏幕尺寸

屏幕尺寸是以屏幕对角线的长度来计量，计量单位为英寸。

如图所示对角线的长度就是这个屏幕的尺寸。

image.png

1.2 分辨率

手机机型 (iPhone)	屏幕尺寸(inch)	逻辑像素(pt)	物理(设备)像素(px)	渲染像素(px)	缩放因子(Scale Factor)	像素密度(PPI)
11 Pro Max	6.5	414 x 896	1242 x 2688	1242 x 2688	@3x	458
11 Pro	5.8	375 x 812	1125 x 2436	1125 x 2436	@3x	458
11	6.1	414 x 896	828 x 1792	828 x 1792	@2x	326
XS Max	6.5	414 x 896	1242 x 2688	1242 x 2688	@3x	458
XR	6.1	414 x 896	828 x 1792	828 x 1792	@2x	326
XS	5.8	375 x 812	1125 x 2436	1125 x 2436	@3x	458
X	5.8	375 x 812	1125 x 2436	1125 x 2436	@3x	458
6(S)/7/8 Plus	5.5	414 x 736	1080 x 1920	1242 x 2208	@3x	401
6(S)/7/8	4.7	375 x 667	750 x 1334	750 x 1334	@2x	326
5(S/SE)	4	320 x 568	640 x 1136	640 x 1136	@2x	401
4(S)	3.5	320 x 480	640 x 960	640 x 960	@2x	326
3GS	3.5	320 x 480	320 x 480	320 x 480	@1x	163

手机机型	状态栏高度	导航栏高度	tabbar高度
X以前	20/40	44	49
X以后	44	44	83

1.3 宽高比

设备	逻辑分辨率(pt)	物理分辨率(pixel)	宽高比(近似)	比例(近似)
2G/3/3GS	320 x 480	320 x 480	1.50	2 : 3
4/4S	320 x 480	640 x 960	1.50	2 : 3
5/5S/5C/SE	320 x 568	640 x 1136	1.77	9 : 16
6/6S/7/8	375×667	750 x 1334	1.77	9 : 16
6/6S/7/8 Plus	414×736	1080 x 1920	1.77	9 : 16
X	375 x 812	1125 x 2436	2.16	9 : 20

1.4 缩放因子（scale）

因为逻辑分辨率和物理分辨率存在着一定的比例关系，这种比例的关系称为缩放因子。其对应关系为：

1 pt = scale * px

奇葩的iPhone 6屏幕
iPhone 6有iPhone 6和iPhone Plus两个屏幕尺寸。其中iPhone 6 Plus的屏幕为5.5寸屏幕。其标明缩放因子为@3x，我们通过缩放因子计算，其分辨率应该为1242 x 2208。但是，实际上iPhone 6 Plus的像素为1080 x 1920。严格来说，iPhone 6 Plus的缩放因子应该为:

scale = 1080 px / 414 pt ≈ @ 2.6x

实际上，iPhone 6 Plus上做了特殊的缩放处理。假设我们画一条100pt的线。经过如下步骤进行最终显示出来：
1.以逻辑点描述
开始我们以点的方式描述直线所在的起始位置。100pt的直线。
2.渲染成像素点
通过缩放因子@3x，将点渲染成逻辑画布。100pt被渲染成了300px。
3.进行缩放采样
对渲染进行缩放采样，计算实际显示的画布。缩放的倍数为1.15(@3x / @2.6x)。300px被缩小成了260px。

1.5 从逻辑像素到物理像素

逻辑像素即一般代码中使用的点pt，逻辑像素的大小显示内容的多少。
物理像素是屏幕的实际分辨率，可以用逻辑分辨率乘以缩放因子获得。开发实际使用的单位是pt。而UI给出的视觉稿是以px为单位的。所以，开发中需要将px转化成pt。

当这个设计稿在iPhone 6和iPhone 6 Plus进行渲染时，渲染后结果为。

设备	缩放因子	逻辑像素	物理像素
iPhone 6	@2x	100pt	200px
iPhone 6 Plus	@3x	100pt	300px

明显的，我们可以看到iPhone 6和iPhone 6 Plus相差了20px。那岂不是说，在不同的屏幕上看到的效果不一致喽。先不急，我们接着往下看。
严格来说，iPhone 6 Plus的缩放因子为@2.6。所以，在iPhone 6 Plus上，实际显示像素为:

300px * 1080 / 1242 ≈ 260px

到这里，iPhone 6和iPhone 6 Plus还是相差了100px。但是，众所周知iPhone 6 Plus的PPI比iPhone 6的高。所以还需要考虑PPI的影响。

1.6 (像素密度)PPI

像素密度PPI(Pixel Per Inch)是指每英寸上容纳的像素数量，屏幕像素密度，指的是屏幕分辨率的单位。
计算PPI，可以简单用勾股定理计算出对线上出现的像素，再除以对角线上长度:

image.png

iPhone 3G屏幕数据代入公式:

image.png

将iPhone 4屏幕数据代入公式:

image.png

PPI的影响
iPhone 6的PPI是326，而iPhone 6 Plus为401。iPhone 6 Plus每英寸的长度显示的像素比iPhone 6多。所以，在视觉效果上，同样像素的控件，在iPhone 6 Plus看起来要更小一点。
如果将iPhone 6 Plus的260px，等比放在iPhone 6上，在视觉上还要再进一步的缩小。所以，iPhone 6 Plus的260px，换算成iPhone 6的视觉效果，大概为：

260 px * 326 / 401 ≈ 211 px

是的，这就是最终的效果，在视觉上还是有11px的差距。但是，这个差距在视觉上已经没什么差距了。

1.7 为什么采用iPhone 6/7/8(750 x 1334)作为设计稿

1.从中间尺寸向上和向下适配的时候界面调整的幅度最小。750px下的设计效果适配到828px和640px偏差不会太大。

Android机型常用的设计尺寸是720 * 1280，720和750两个尺寸就差30px。换算下来就是15pt，可以忽略这微小的差距。

参考：

• https://m.ui.cn/details/25876
• https://www.zcool.com.cn/article/ZMTAzNjYyMA==.html
• https://www.zhihu.com/question/40506180