iPhone 记录之 点与像素

简述

为了避免 Android 设备的适配大坑，苹果提供一套适配自家产品不同尺寸的方案，让我们来探究一下像素与点的关系吧。

 

探究

从初代iPhone 到 iPhone 3GS，iPhone系列坚守 320 x 480 像素。开发人员采用绝对定位及像素模式进行处理。但是 iPhone 4之后就发生了改变，iPhone 4 采用Retina显示屏。即当前物理尺寸不变，但像素成倍增加，变成了640x960像素。

 

为了避免同行出现的大坑(屏幕适配难)，苹果对开发人员提出了point (点) 的概念。(以一维方式进行探究)

1 在iPhone 3GS中, 1 个点 等于 1 个像素 

2 在以后的设备中(非iPhone 6+/6s+/7+/8+/X) ,1个点等于2个像素 

3 iPhone 6+/6s+/7+/8+/X 中 ,1个点等于3个像素

这样用户在使用iPhone 4 的时候，会感觉比iPhone 3GS 更加细腻。

 

由此，我们需要对市面上的一些单位及术语进行相关的总结:

1 英寸: 作为手机屏幕对角线的物理长度的单位。如 iPhone 8 Plus 为5.5英寸。

2 像素: 可以想象成屏幕上真正用来显示颜色的发光小点。如 iPhone 8 Plus 为 1080x1920 像素。

3 点:    针对开发人员，开发App时候用的单位，是一个虚拟的单位，用于屏蔽各个设备屏幕像素的不同，兼容以前的程序。

4 ppi(pixel per inch): 每英寸有多少个像素。 iPhone 4 的屏幕是  640x960像素，3.5英寸。那么根据勾股定理，对角线应该有 1154个像素，转换一下也就是 1154/3.5 = 330pi, 官方给出的数字是 326 ppi。

5 Retina屏: Retina翻译过来是视网膜。当像素太密超过 300ppi的时候，人眼就不能够区分出每个像素，因此 iPhone 4以后的屏幕都是Retina屏。

6 文字、颜色等矢量数据 放大是不会失真的。但是图片并非矢量数据，直接使用会产生问题。因此苹果对它采用不同的处理方式。

 

假设example.png 为 30x40 像素 (这里的单位为像素，数字图片的单位基本都为像素)。当example.png在 iPhone 3GS和 iPhone 4中使用的时候，都占据屏幕30x40个点。而iPhone 4中 1 个点等于 2 个像素，也就是30x40像素的图片，占据了60x80 像素的屏幕，因此这图片在iPhone 4中看起来会模糊。

 

为了对图片进行适配，需要准备三张内容相同的图片，放在同一目录下。

example.png             // 30x40 像素

example@2x.png      // 60x80 像素

example@3x.png      // 90x120 像素 

当程序中使用图片时，会根据屏幕模式自动选择对应的图片。 屏幕1x模式，就会选择example.png。 2x就会优先选择example@2x.png，假如example@2x.png不存在时，就会降级选择example.png。屏幕3x模式同理屏幕2x模式的降级选择。

 

附表 (至2017-11-06以来，iPhone 系列设备参数表)

机型	屏幕宽高(点)	屏幕宽高(渲染像素)	设备分辨率	屏幕模式	屏幕精度(ppi)	屏幕对角线长度
iPhone 3GS	320 x 480	320 x 480	320 x 480	@1x	162	3.5 英寸
iPhone 4	320 x 480	640 x 960	640 x 960	@2x	326	3.5 英寸
iPhone 4s