跨设备设计基础 | 如何确定任意屏幕的分辨率指标

2020 年 9 月 20 日 谷歌开发者

作者 / Liam Spradlin, Design Advocate, Google

设备不断推陈出新，带来新的规格、屏幕尺寸和像素密度，这也意味着需要匹配这些设备调整产品设计。如果在 Google 上没搜索到设备的规格数据，这就意味着您需要使用简单的数学知识，亲自动手计算出该设备的各个分辨率指标。本文会带您一起完成这一过程。

自己动手 🛠

您最终需要的信息有六项: 屏幕对角线长度、屏幕长度和宽度、长宽比、像素分辨率、dp (密度无关像素，即 Android 逻辑像素) 和每个设备所属的密度分区 (density bucket)。其中一些数据可以在设备的产品页面上找到，或者在其他收集特定设备信息的网站上查询。

密度无关像素

https://developer.android.google.cn/training/multiscreen/screendensities

让我们通过一个示例来快速一览这些数据。比如下图是 Pixel 4 的一些数据。

屏幕对角线、长宽比和像素分辨率都可以在 Pixel 4 的产品页面找到。对于规格页面信息不够详细或不易访问的设备，GSMArena Phone Finder 这样的网站是非常实用的资源。

Pixel 4 产品页面

https://store.google.com/product/pixel_4_specs
GSMArena Phone Finder

https://www.gsmarena.com/search.php3?

确定屏幕尺寸 📐

在表格中填写好既有的数据后，我们还有三个数据需要求解。第一个是屏幕的宽高尺寸。我从 Hanna Pamula 的 Omni Calculator 页面上学到的公式非常简便，只需要对角线长度和长宽比 (Aspect Ratio, AR) 即可求解。

宽度 = 对角线长度 / √(AR²+1)

高度 = AR × 宽度

Hanna Pamula 的 Omni Calculator

https://www.omnicalculator.com/other/screen-size

所以对于我们的示例，已知屏幕对角线是 5.7 (英寸)，长宽比是 19:9 (在公式中写成 19/9)。

宽度 = 5.7” / √((19/9)²+1)

宽度 = 2.44”

现在我们知道了宽度，可以求解高度了。

高度 = (19/9) × 2.44”

高度 = 5.15”

所以我们的屏幕尺寸是 2.44×5.15”

确定 dp 分辨率 📏

密度无关像素是 Android 的逻辑像素，以 dp 为单位。设计师和开发者可以借此确保创建的内容在不同屏幕上以相同的物理尺寸显示，无论这些屏幕的像素密度是多少。因此，了解设备的 dp 分辨率对设计工作非常有帮助。您可以轻松设置针对特定设备规格的画布尺寸和素材资源，并在各个屏幕上可靠地重现设计。

对于 dp 公式 (您可以在 Android 像素密度的开发者文档中找到)，我们需要知道屏幕像素分辨率、先前计算出来的尺寸以及屏幕 ppi。屏幕 dpi (也写为 ppi) 应该可以从上文提到的设备产品页等来源中获得 (比如 Pixel 4 是 444 dpi)。

px = dp × (dpi/160)

开发者文档: 支持不同的像素密度

https://developer.android.google.cn/training/multiscreen/screendensities

在我们的示例中，已知屏幕的像素分辨率为 1080×2280px，物理尺寸为 2.44×5.15”，因此我们可以将这些值代入公式，首先计算 dp 宽度:

1080 = dp×(444/160)

1080 = dp×2.775

dp = 1080/2.775

dp = 389

接下来计算屏幕的 dp 高度:

2280 = dp×2.775

dp = 2280/2.775

dp = 822

确定密度分区 🔍

在前文提到的 Android 像素密度开发者文档中，还给出了 "密度限定符 (density qualifier)" 的概念，Android 将根据这个限定符为应用提供不同的位图资源。如果您的设计中存在照片或插图等非矢量素材资源，那么建议您了解目标设备所覆盖的密度分区，为每个设备提供合适的素材资源，从而加快加载速度并避免失真和 "内存不足" 等错误。

确定密度分区非常简单，根据 dpi 数值查询下面这个表格即可。我们已经知道 Pixel 4 是 444ppi，查表知密度限定符是 XXHDPI。