屏幕适配那些事（01）屏幕适配和逻辑分辨率

屏幕适配是一个老生常谈的问题了，我用这三篇博客和大家讨论点屏幕适配相关的干货。

• 01 屏幕适配和逻辑分辨率
• 02 Android逻辑像素刨根问底
• 03 几点建议

---

什么是屏幕适配？

我们先来给屏幕适配下一个定义：

屏幕适配是让一套UI在不同尺寸、不同分辨率和不同比例的屏幕上都能正常显示。

这里的“正常”两个字比较模糊，我来解释一下，设备的尺寸、分辨率、比例不同，但是系统在显示内容的时候，有一个虚拟的度量单位——逻辑像素——这也是我们下面一节要讨论的内容。我们姑且认为“更大的屏幕”（逻辑分辨率更高的屏幕）应该显示更多内容，拿iPhone/Android的内置应用的设计作为例子很合适，它们在不同的设备上都能“正常”显示。我们看一个例子，相同的一张图片，要求在屏幕中央显示，对比下面的第2/3/4张图，你会发现“正常”和“不正常”的区别。

normal_design

图二的开发者可能将设计师的意图理解为图片居中显示，大小为xxx px。

图三的开发者可能将设计师的意图理解为图片居中显示，距边框xxx dp。

图四的“不正常”可能不太明显，其和图三的做法类似，只不过在考虑和边框的距离时，使用了px单位而不是dp，这也将导致意外的结果，我们将马上讨论这一点。

对相同设计稿的不同理解可能导致意想不到的结果，真实设备的屏幕千差万别，每个元素都差一点点，整个界面的最终显示效果就会变得异常奇怪。

在深入讨论"如何构建具有很强适应能力的UI？"这个非常难的问题之前，让我们先清楚了解逻辑像素和它相关的概念。

逻辑像素、逻辑分辨率、逻辑像素密度

和上面一样，我们先给逻辑像素下一个定义：

逻辑像素是与屏幕像素密度无关的抽象“点”的概念，是设计和开发UI的一般单位，用dp表示。

iOS开发中使用pt表示密度无关像素，为了统一，这里使用表意更加明确的dp单位。

然后是逻辑像素相关的概念：

逻辑分辨率就是用逻辑像素描述屏幕的分辨率，例如360dp*640dp。(具有这个逻辑分辨率的手机型号非常多，大多数5英寸左右的Android手机，其逻辑分辨率都是这个值。)

逻辑像素密度使用屏幕像素密度相对于基准屏幕密度的倍数表示，即相对密度。常见的对于逻辑像素密度的描述比如iOS开发中常用的“2倍图”、“3倍图”。逻辑像素密度表示逻辑像素和物理像素之间的关系：

假设逻辑像素密度为n，那么1 dp = n px。

下面展示在三种具有不同像素密度的屏幕上显示相同物理大小（相同逻辑像素大小）的圆的情况，用以说明引入逻辑像素的意义。

density_circle

上面三个圆的直径和描边，用像素为单位表示，分别为8px/1px，16px/2px，32px/4px。可以这样解释，为了在具有不同像素密度的屏幕上呈现相同的物理尺寸，需要针对每种屏幕指定不同的尺寸。

Apple和Google都非常有预见性，他们让iOS和Android使用dp为单位度量屏幕上的UI元素。上面的情况，如果使用逻辑像素描述，均为8dp/1dp，这使得我们在设计和开发的时候，不需要关注这个屏幕的像素密度究竟是多少，只关心逻辑分辨率即可。这也就是密度无关像素——逻辑像素的由来和意义。

逻辑分辨率带来的另外一个好处是：屏幕显示内容的多少，和屏幕大小的关系更为紧密，而和屏幕分辨率、屏幕像素密度(ppi)的关系并不大。这是符合人们的常识的——屏幕越大，显示内容越多。目前的部分Android设备在这个问题上处理的并不是那么好，后面会提到。

如果你使用过不同尺寸的iPhone和不同尺寸的Android设备，你可能会有这样的感觉：iPhone的设计符合“屏幕越大，显示内容越多的常识”，而且是线性变化的；而Android设备则不然，越大的屏幕，并不一定显示更多的内容，比如三星S7和三星S7 edge，屏幕尺寸分别为5.1和5.5英寸，但是他们显示的内容是一样多的（逻辑分辨率一致）。

如果拿Android设备和iPhone进行对比，结果同样让人惊讶，Nexus5的屏幕尺寸为5英寸，iPhone6的屏幕尺寸为4.7英寸，按照常识，Nexus5应该比iPhone6显示更多的内容，但实际情况刚好相反，Nexus5显示的内容更少！因为Nexus5的逻辑分辨率为360 ×640(dp)，而iPhone6/6s/7的逻辑分辨率为375×667(dp)。

下面这张图说明了上面例子中物理尺寸和逻辑分辨率上的差异。

nexus5_iphone7

通常我们看到手机介绍页面会大家宣传屏幕分辨率和屏幕密度，其实他们对于屏幕显示内容的多少并没有太大关系，因为它们的操作系统决定了它们显示内容的规则——逻辑分辨率决定了显示内容的多少，而逻辑像素和屏幕的物理尺寸关系更加密切。

屏幕分辨率和屏幕密度更加明显的影响是对清晰程度的影响，相同屏幕尺寸，分辨率越高，屏幕密度越高，显示越清晰。但是有一个常识，300ppi的屏幕已经足以让眼睛在正常使用的时候无法区分单个像素点，也就是乔布斯提出的“视网膜屏幕”概念，400ppi的屏幕足以让人眼在近距离观察屏幕时无法区分单个像素点。也就是说，除非你使用放大镜观察屏幕，正常使用的话，400ppi以上的屏幕没啥必要了，甚至300ppi就已经足够了。

上面这段话针对LCD屏幕，如果是LED屏幕的话，受排列方式影响，300ppi是远不够达到视网膜屏幕水平的，三星S7edge的ppi达到了534，才能称之为优秀。不过这不是这篇博客讨论的内容，如果你想继续了解的话，可以去查一下。

更多设备的逻辑分辨率参考：Devices

下篇文章我们将讨论Android的逻辑分辨率是怎么计算得出的。