在上一篇文章《iPhone屏幕分辨率和适配规则（基础篇）》中，讲了iPhone分辨率的基础概念。这一篇我们讲讲屏幕适配。

物理像素和逻辑像素

要讲屏幕适配，物理像素和逻辑像素是两个绕不开的概念。先来看一下为什么要有两个像素单位。

如果使用物理像素

我们来假设一个问题，如果只用物理像素（pixel）来作为单位，会出现什么问题。

来看一下，一个100px的正方形在不同手机下的打开的效果。

100px的正方形

iPhone 3GS和iPhone 4的屏幕大小一样，但是iPhone 4的像素密度是iPhone 3GS的2两倍。所以一样100px的正方形，在iPhone 4上看起来像是缩小了一倍。在iPhone 4和iPhone 6上的显示大小是一样的。

如果使用逻辑像素

所幸的是，我们看到的是iPhone 3GS和iPhone 4的逻辑像素（point）是一致的。如果使用逻辑像素，100pt的正方形在不同手机下打开的效果是如何的。

100pt的正方形

好了，可以看到100pt的正方形在所有屏幕上看起来大小都一样了。

事实上，iPhone使用的就是逻辑像素作为显示单位的。

适配的过程

iPhone 6和iPhone 6 Plus的尺寸是比较神奇的。我们以iPhone 6的例子来看看适配的过程。

从UI到开发

开发实际使用的单位是pt。而UI给出的视觉稿是以px为单位的。所以，首先需要将px转化成pt。

在这一步，要搞清楚UI给出的视觉稿以什么分辨率作为基准。如果是iPhone 6的640 × 960px，则用@2x作为缩放因子。如果是iPhone 6 Plus的1242 × 2208px（注意，不是1080 × 1920px），则用@3x作为缩放因子。

假设以iPhone 6作为基准，需要绘制一个40px的按钮。以@2x进行缩放，开发以20pt进行绘制。

在实际设计中，经常以iPhone 6作为基准，向下可以适配iPhone 5，向上可以适配 iPhone 6 Plus。

从逻辑像素到物理像素

当这个设计稿在iPhone 6和IPhone 6 Plus进行渲染时，渲染后结果为。

设备	缩放因子	逻辑像素	物理像素
iPhone 6	@2x	20pt	40px
iPhone 6 Plus	@3x	20pt	60px

明显的，我们可以看到iPhone 6和iPhone 6 Plus相差了20px。那岂不是说，在不同的屏幕上看到的效果不一致咯。先不急，我们接着往下看。

iPhone 6 Plus的缩放

iPhone 6 Plus的实际分辨率为1080 × 1920px，而不是1242 × 2208px。严格来说，iPhone 6 Plus的缩放因子为@2.6。所以，在最终显示到屏幕上还需要经过采样缩放。在iPhone 6 Plus上，实际显示像素为：

60px * 1080 / 1242 ≈ 52 px

到这里，iPhone 6和iPhone 6 Plus还是相差了12px。

但是，众所周知iPhone 6 Plus的PPI比iPhone 6的高。所以还需要考虑PPI的影响。

PPI的影响

iPhone 6的是326ppi，而iPhone 6 Plus为401ppi。什么意思呢？就是说，iPhone 6 Plus每英寸的长度显示的像素比iPhone 6多。所以，在视觉效果上，同样像素的控件，在iPhone 6 Plus看起来要更小一点。

如果将iPhone 6 Plus的52px，等比放在iPhone 6上，在视觉上还要再进一步的缩小。所以，iPhone 6 Plus的52px，换算成iPhone 6的视觉效果，大概为：

52px * 326 / 401 ≈ 42px

是的，这就是最终的效果，在视觉上还是有2px的差距。但是，这个差距在视觉上已经没什么差距了。

适配规则

下面来看一下iPhone适配的一些简单的规则。

留黑边

iPhone 4(S)之前，宽高比是1.5，iPhone 5之后，宽高比变成了1.77，到了iPhone X发布会，宽高比又进一步拉大变成2.10。可以想象成在原来的屏幕基础上长了一截出来。

如果要维持页面宽高比不变，则屏幕的上下部分会出现一个黑边。因为屏幕本身就是黑的，所以在视觉上并不会出现特别不适的情况。

QQ在iPhone X上的视频

虽然这种办法简单粗暴，但是却是比较高效简单的办法。事实上，在新的屏幕比例发布后，很多APP就是用这种临时方案来暂时进行适配的。

等比缩放

iPhone 5和iPhone 6/7/8 和 iPhone 6/7/8 Plus之间虽然屏幕尺寸变大了，但是，其比例都是16:9。

通过弹性放大的方式将其等比的放大来适应屏幕的变化。

网易新闻在不同屏幕下的显示

可以看到，不同的屏幕尺寸不一样，可是显示的内容却是一致的。

变大后的失真的问题

因为图标通常都是位图。所以不可以避免的，经过拉大后图标会出现失真的问题。

为此iPhone提供了一套解决方案。为不同分辨率的设备提供不同分辨率的图标。iPhone 3GS~iPhoneX有着三种不同的缩放因子，根据不同的缩放因子，我们需要提供三种分辨率的图标：@1x/@2x/@3x。

UI以icon.@1x.png/icon.@2x.png/icon.@3x.png为命名，程序自动根据不同的屏幕使用不同的icon图标。

适配基础规则

大屏幕带来了较大的显示空间。但是，无论是留黑边的方式，还是等比缩放的方式，在屏幕加大时并不能将更多的信息呈现给用户。白白浪费了大屏幕的优势。

我们来看看怎么解决这个问题。有三条比较基础的规则：文字流式（fluid），控件弹性（flexible），图片等比缩放（scale）。

文字流式（fluid）

屏幕变大时，保持文字大小不变，随着屏幕变大，横向拉宽文字的显示区域。

为什么要保持文字大小不变

字体不是越大越好的。通过测试，iPhone的字体大概在20px~36px时（排除某些特殊的设计），会得到比较良好的阅读体验。保持字体大小在一定范围内，就是为了保证阅读起来比较舒服。

控件弹性（flexible）

屏幕变大时，保持控件大小不变，随着屏幕的变大，横向调整控件的相对位置。

相比于将控件固定在某个位置上，这种布局能更好地保持控件在页面上的平衡。同时，也能保证屏幕变大的时候，控件不会因为被拉大而失真。

图片等比缩放（scale）

对于图片，屏幕变大时，没办法只拉伸横向的，这样会导致图片的比例失调。所以，对于图片，要保证等比放大。也就是说，在宽度跟随屏幕变大的时候，高度也等比地变大。

图片相对于图标来说，有更高的像素，所以拉大图片失真的效果并不明显。

举例

以下是网易云音乐在不同屏幕下的显示情况。可以看到，当屏幕加大了之后，页面可以显示更多的内容。

背景适配

如果涉及到背景图、启动图等，铺满整个画面的图片，需要额外的考虑。iPhone 5到iPhone 8 Plus屏幕的宽高比是一样的，所以直接拉伸图片就可以了。到了iPhone X，宽高比加大后，再继续拉伸就有可能失真了。

对于屏幕比例变化的情况，可以做如下考虑：

适配高度，宽度自动填充

等比放大图片后，如果高度较小，则宽度进行自动填充。特别要注意，最好填充的颜色接近于图片颜色。

适配宽度，高度度自动填充

等比放大图片后，如果宽度较小，则高度进行自动填充。同样的，要考虑填充颜色。

等比放大，超出部分不显示

等比放大后，超出的部分不显示。对于这种情况，要注意是否截取掉图片的有用内容。

写在最后

本文只是简单的探讨了iPhone适配的规则。现实中，还有很多的因素需要考虑。有时候，对于某些特殊的页面，可能还会根据不同的屏幕出不同的方案。

---

《iPhone屏幕分辨率和适配规则（基础篇）》
《iPhone屏幕分辨率和适配规则（规则篇）》
《iPhone屏幕分辨率和适配规则（实现篇）》