前言:
随着 iPhone 5 SE 的即将发布, iOS 曾经被 Android 羡慕的屏幕适配也渐渐不在那么方便了.
所以,以前的那种,希望能通过 UI 设计 给出 一套图,来适应各种尺寸的手机,我们现在又应该怎么做呢?
结论先放在最前面,防止有些同学 " 太长不看 ".结论引自威锋的sdtwd.
结论:
从 Scaling factor角度:
展示各种设备像素不同的渲染，我们比较有点宽线呈现上.
- 原始的苹果因为没有 Retina 显示屏, 所以显示比例系数 为 1 .
- 在iPhone 5 上配备了 Retina 显示屏,所以显示比例系数 为 2 .
- 在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.
译文如下:
展示各种设备像素不同的渲染，我们比较有点宽线呈现上.
- 原始的苹果因为没有 Retina 显示屏, 所以显示比例系数 为 1 .
- 在iPhone 5 上配备了 Retina 显示屏,所以显示比例系数 为 2 .
- 在iPhone 6 Plus 上配备了 高清Retina 显示屏。所以显示比例系数 为 3，图像是后来从 2208 × 1242 像素 缩小到 1920 × 1080 像素。
1920 / 2208 = 1080 / 1242 = 20 / 23.
这意味着每23个像素从原来的渲染必须映射到20个物理像素。换句话说，图像被缩小到大约87%的原始大小。