深入浅出 Viewport 设计原理

2023-11-07 10:14:40

Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现，提供响应式解决方案。这篇文章尝试通过循序渐进的方式，逐层探索 Viewport 的设计原理，希望能给读者带来更加清晰、更加全面的技术认知。

一、引言

在PC时代，我们用 css 设置 1px 边框，显示器会用1个物理像素进行渲染。而进入移动应用时代后，我们原来设置1px边框，在手机上可能需要用 2 个或 3 个物理像素来渲染。

那么，手机为什么要这么做？解决了什么问题？以及我们开发过程中需要做什么？

下面，我们将带着这些问题来一步步探索移动端 Viewport 设计原理，以及如何利用 Viewport 进行移动端适配。

二、基础概念

1、屏幕尺寸

屏幕尺寸指的是手机屏幕对角线的长度，知道了屏幕的宽度（width）和高度（height），对角线就可以通过勾股定理算出：

然后再把这个长度换算成 “英寸（inch）”，就是我们平时所说的手机尺寸。

1 英寸等于 25.4mm，即:

比如 iPhone 常见的尺寸有 3.5寸、4寸、4.7寸、5.5寸等等。

2、物理像素

我们在手机屏幕上看到的画面，本质上都是由一个个发光的物理像素组成，物理像素是构成屏幕图像的最小单元。

我们常说的屏幕分辨率，就是指这个屏幕上拥有多少个物理像素。

比如： iPhone4 的分辨率是 640 × 960，即屏幕在水平方向上有 640 个像素，在垂直方向上有 960 个像素。

通常，设计师给的 UI 设计稿上的 PX 指的就是物理像素。

3、像素密度 - PPI

PPI（Pixel Per Inch by diagonal）：表示对角线上每英寸所拥有的像素个数。

计算PPI，可以简单用勾股定理计算出对角线上的像素，再除以对角线长度：

将 iPhone 4 屏幕数据代入公式，即可得出 iPhone4 的 PPI :

PPI 的值越大，每英寸屏幕上的物理像素点就越多越密集，从而渲染出来的画面也更加细腻、清晰。

比如，iphone3GS 和 iphone4 拥有相同大小的屏幕。但前者的分辨率是 320*480，可以算出PPI为 163，而后者的分辨率是 640*960, 其PPI是326。

这就导致 iphone4 在画面呈现上比 iphone3GS 更加清晰和细腻。

4、PPI 导致的问题

我们先看下面的两张图有什么区别？

很明细，左边的图要比右边的看着舒服。

左边的字体大小适中，图片文字都能看的清楚，相比而言，右边的字体就太小了，让用户阅读变得困难。

那么，这个问题是怎么造成的呢？

我们先来做一个对比实验，如下图所示：

左图和右图分别代表两块尺寸相同的屏幕，长度和宽度均为 5cm，屏幕上的每个方格代表一个物理像素点。

唯一不同的是，左边屏幕分辨率为5 × 5，而右边屏幕分辨率为 10 × 10 。

现在屏幕上放了一个按钮，它的 css 样式为:

.button {
  width: 3px;
  height: 1px;
}

从图上的效果可以看出，虽然我们为两个按钮设置了相同的大小，但右屏上的按钮比左屏上的按钮小了很多。

所以我们会发现，相同尺寸的屏幕，像素点越多，每个物理像素点“自身”大小就越小，从而导致渲染出来的图像就会越小。

也就是说，设置相同大小的样式，屏幕的 PPI 越大，渲染出来的图像就越小。

这其实是一个问题。

在移动时代，手机的大小和分辨率参差不齐，从而导致PPI也不尽相同。当我们把一个web页面放到PPI不同的设备上浏览时，就会出现“大小各异”的效果，违背了我们对 css 样式 “所见即所得” 的认知。

为了让同一个元素在所有设备上看起来都差不多大，设备厂商给显示屏幕增加了 “缩放因子”。

5、缩放因子 - DPR

这里的缩放因子并不是对图像本身进行缩放，而是使用更多的像素来渲染同一个元素。

如下图所示，同样大小的矩形，在第一个设备上用过了 8×1 个物理像素来渲染，而在第二个设备上用了 16×2 个物理像素来渲染，在第三个设备上则用了 24×3 个物理像素来渲染。

这样以来，同一个元素在所有设备上的显示效果都一样了！

从图上可以看出，屏幕的PPI越大，缩放因子就越大。如果以第一个屏幕为基准，这三个屏幕的缩放因子分别为： 1、2、3。

通常我们把 “缩放因子” 叫做 DPR。DPR 是 device pixel ratio 的缩写，即设备像素比。

这里需要注意的是：

dpr 的大小并不是通过固定公式计算出来的，而是厂商给屏幕设置的一个固定值，出厂时就确定了，它的大小不会随着程序的设置而改变。

6、DPR 和 PPI 的对应关系

不同平台定义 DPR 的基线 PPI 是不同的。

由于第一代 iPhone 的 PPI 是163，所以苹果把 163 作为缩放基线。

因此，在 iPhone 中， PPI=163 是1x 屏，PPI=326 是 2x 屏。

PPI	163	326	401	458
DPR	1	2	3	3
代表机型	iPhone3GS	iPhone4	iPhone6P	iPhoneX

而 Android 的缩放基线 PPI 是160，所以 PPI=160 是 1x 屏，PPI=320 是 2x 屏。

从图中可以看出:

DPR 的大小和 PPI 正相关，但不成正比，我们无法通过特定的公式来计算它的大小。

7、逻辑像素和逻辑分辨率

对于同一个元素，DPR 越大，屏幕所需要的物理像素就越多，这是我们上面得出的结论。

那么，在软件程序中，元素的大小到底应该写成多少px？

为了解决这个问题，我们引入 “逻辑像素” 的概念，即 css 中写的 px 。

所谓逻辑像素，就是它的大小和物理像素不是一一对应的。

假设，我们现在设置一个元素的css样式如下：

.el {
  width: 8px;
  height: 1px;
}

那么，这个元素在不同屏幕上渲染方式是不同的：

在 dpr=1 的屏幕上，1个逻辑像素对应1个物理像素。

在 dpr=2 的屏幕上，1个逻辑像素需要对应2个物理像素，才能保证元素同等大小。

同理，在 dpr=3 的屏幕上，1个逻辑像素对应3个物理像素，才能保证元素同等大小。

因此，我们可以得出一个结论：

一个逻辑像素在不同屏幕上所表示的物理像素数是不同的，它的大小和 dpr 一一对应。

有了这个理论，我们就能推导出屏幕的逻辑分辨率，也就是屏幕的 “逻辑宽度” 和 “逻辑高度”。

比如 iPhone6 的物理分辨率为 750 × 1334，dpr = 2, 带入公式就可以得出其逻辑分辨率：

屏幕的逻辑分辨率也可以通过 DOM API 来获取：

// iPhone6
window.screen.width;// 375px
window.screen.height;// 667px

通常，我们在 CSS 中设置的元素尺寸，本质上都是基于逻辑分辨率进行布局的。

8、iPhone 常见的几种规格

设备	逻辑分辨率(point)	物理分辨率(pixel)	屏幕尺寸	dpr	PPI
iPhone 3GS	320 × 480	320 × 480	3.5寸	1	163
iPhone 4	320 × 480	640 × 960	3.5寸	2	326
iPhone 5	320 × 568	640 × 1136	4.0寸	2	326
iPhone 6	375 × 667	750 × 1334	4.7寸	2	326
iPhone 6 Plus	414 × 736	1080 × 1920	5.5寸	3	401
iPhone X	375 × 812	1125 × 2436	5.8寸	3	458
iPhoneXR	414 × 896	828 × 1792	6.1寸	2	326
iPhoneXS Max	414 × 896	1242 × 2688	6.5寸	3	458