前言

下图是苹果官方对iPhone 机型的介绍:


拿iPhone7 Plus来说:

屏幕尺寸:5.5英寸

手机分辨率(像素):1920 (高)x 1080(宽)

PPI:401

概念说明

屏幕尺寸:表示手机屏幕对角线的长度,单位是英寸。1英寸(inch)=2.54厘米(cm)

手机分辨率:分辨率可以从显示分辨率与图像分辨率两个方向来分类。

显示分辨率(屏幕分辨率):屏幕图像的精密度,是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的,显示器可显示的像素越多,画面就越精细,同样的屏幕区域内能显示的信息也越多。

图像分辨率:单位英寸中所包含的像素点数,其定义更趋近于分辨率本身的定义。

分辨率的单位:(dpi点每英寸)、lpi(线每英寸)和ppi(像素每英寸)。但只有lpi是描述光学分辨率的尺度的。虽然dpi和ppi也属于分辨率范畴内的单位,但是他们的含义与lpi不同。而且lpi与dpi无法换算,只能凭经验估算。ppi和dpi经常都会出现混用现象。但是他们所用的领域也存在区别。从技术角度说,“像素”只存在于电脑显示领域,而“点”只出现于打印或印刷领域。

ppi:Pixels Per Inch,屏幕像素密度,每英寸屏幕所拥有的像素数,在电脑显示领域使用。

dpi:Dots Per Inch,每英寸长度上的点数,在打印领域使用。

屏幕像素密度,分辨率,屏幕尺寸的关系


所以美工使用PS作图的大小为手机分辨率的大小。

如需要设计适配iPhone7的手机,我们使用1334 x 750px大小

但有一点是特殊的,就是iPhone6(s) plus、iPhone7 plus,我们需要使用2208 x 1242px大小,

原因:

ppi为326的手机,使用的为@2x的素材,对于ppi是401的手机,理论上苹果应该用401/326 * @2x=@2.46x的素材。但是这个奇葩的比例对开发者而言很难切图。所以苹果为方便开发者用的是@3x的素材,然后再缩放到@2.46x上,实际上是缩放到2.46/3=83%。实际上苹果选取了一个接近比例的87%。

这样算下来,物理分辨率和虚拟分比率的比例是87%,也就是1920/0.87=2208,1080/0.87=1242.

好处就是开发者更方便,比如准备素材时,字号可以直接调成3x的。

图片大小和分辨率