关于iPhone的屏幕

前言:

随着 iPhone 5 SE 的即将发布, iOS 曾经被 Android 羡慕的屏幕适配也渐渐不在那么方便了.

所以,以前的那种,希望能通过 UI 设计 给出 一套图,来适应各种尺寸的手机,我们现在又应该怎么做呢?

 

---

 

结论先放在最前面,防止有些同学 " 太长不看 ".结论引自威锋的sdtwd.

结论:

从 Scaling factor角度:

展示各种设备像素不同的渲染，我们比较有点宽线呈现上.

1.  原始的苹果因为没有 Retina 显示屏, 所以显示比例系数 为 1 .
2.  在iPhone 5 上配备了 Retina 显示屏,所以显示比例系数 为 2 .
3.  在iPhone 6 Plus 上配备了 高清Retina 显示屏。所以显示比例系数 为 3，图像是后来从 2208 × 1242 像素 缩小到 1920 × 1080 像素。

 

1920 / 2208 = 1080 / 1242 = 20 / 23.

这意味着每23个像素从原来的渲染必须映射到20个物理像素。换句话说，图像被缩小到大约87%的原始大小。

从 DPI 角度:

除了iPhone 6+，其他所有iPhone的DPI是一致的，都是326，用@2x的素材。

然而6+的实际DPI是401，理论上苹果应该用401/326 * @2x=@2.46x的素材。

但是这个奇葩的比例对开发者而言很难切图。

所以苹果为方便开发者用的是@3x的素材，然后再缩放到@2.46x上，实际上是缩放到2.46/3=83%。

实际上苹果选取了一个接近比例的87%。

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

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

 

原文:

Line rendering

To demonstrate different rendering of pixels on various devices, we compare how 1-point wide line is rendered on

• Original iPhone - without retina display. Scaling factor is 1.
• iPhone 5 - with Retina display, scaling factor is 2.
• iPhone 6 Plus - with Retina display HD. Scaling factor is 3 and the image is afterwards downscaled from rendered 2208 × 1242 pixels to 1920 × 1080 pixels.

 

The downscaling ratio is 1920 / 2208 = 1080 / 1242 = 20 / 23. That means every 23 pixels from the original render have to be mapped to 20 physical pixels. In other words the image is scaled down to approximately 87% of its original size.

 

译文如下:

展示各种设备像素不同的渲染，我们比较有点宽线呈现上.

1.  原始的苹果因为没有 Retina 显示屏, 所以显示比例系数 为 1 .
2.  在iPhone 5 上配备了 Retina 显示屏,所以显示比例系数 为 2 .
3.  在iPhone 6 Plus 上配备了 高清Retina 显示屏。所以显示比例系数 为 3，图像是后来从 2208 × 1242 像素 缩小到 1920 × 1080 像素。

 

1920 / 2208 = 1080 / 1242 = 20 / 23.

这意味着每23个像素从原来的渲染必须映射到20个物理像素。换句话说，图像被缩小到大约87%的原始大小。