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，可以忽略这微小的差距。
参考：
网友评论