深刻浅出 Viewport 设计原理

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

1、引言

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

那么，手机为何要这么作？解决了什么问题？以及咱们开发过程当中须要作什么？

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

 

2、基础概念

一、屏幕尺寸

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

 

diagonal 就是屏幕对角线的长度，单位是毫米（mm）,  而后再把这个长度换算成 “英寸（inch）”，就是咱们平时所说的手机尺寸。

1 英寸等于 25.4mm，即:

好比 iPhone 的尺寸 3.5寸、4寸、4.7寸、5.5寸 就是这样计算出来的。

二、物理像素

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

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

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

一般，设计师给的UI设计稿上的“px”指的就是物理像素。

三、像素密度 - 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 更加清晰和细腻。

四、PPI 致使的问题

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

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

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

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

 

为了搞清楚这个问题，咱们先来作一个对比实验，以下图所示：

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

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

如今屏幕上放了一个按钮，宽度为3px，高度为1px，css 样式以下：

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

从图上效果能够看出，虽然咱们为两个按钮设置了相同的样式，但右屏上的按钮比左屏上的按钮小了不少。

因此咱们会发现，相同尺寸的屏幕，像素点越多，每一个物理像素点看起来就越小，从而致使渲染出来的图像就会越小。

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

 

这实际上是一个问题。

在移动应用时代，手机的大小和分辨率良莠不齐，从而致使 PPI 也不尽相同。

当咱们把一个web页面放到不一样设备上浏览时，就会出现“大小各异”的效果，这违背了咱们对 css 样式 “所见即所得” 的认知。

为了让同一个元素在全部设备上看起来都差很少大，设备厂商给屏幕增长了 “缩放因子”。

五、缩放因子 - DPR

这里所谓的缩放因子，并非对图像自己进行缩放，而是使用更多的物理像素来渲染同一个元素。

 

以下图所示，一样大小的矩形元素（灰色条），在第一个屏幕上采用 8×1 个物理像素来渲染，而在第二个屏幕上采用 16×2 个物理像素来渲染，在第三个设备上则采用 24×3 个物理像素来渲染。

这样作的目的是为了让这个元素在不一样设备上看起来差很少大小。

从图上能够看出，屏幕的 PPI 越大，须要的物理像素就越多。若是以第一个屏幕为基准，三个屏幕对应的物理像素数，能够用一个倍率来表示，即 1x、2x、3x。

一般，咱们把这个倍率叫作 “缩放因子”。缩放因子是移动端响应式的关键因素。

而在软件开发过程当中，咱们所说的“DPR”其实指的就是缩放因子。 DPR 是 “device pixel ratio” 的缩写，即设备像素比。

这里须要注意的是：

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

六、DPR 和 PPI 的对应关系

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

因为第一代 iPhone 的 PPI 是163，因此苹果把 163 做为缩放基线。

在 iPhone 中，PPI=163 是 1x 屏；PPI=326 是 2x 屏；PPI=401 是 3x 屏；PPI=458 也是 3x 屏，对应的 DPR 分别为 一、二、三、3。

而 Android 屏幕的缩放基线 PPI 是160，因此 PPI=160 是 1x 屏，PPI=320 是 2x 屏。

能够看出: 在 Android 上，DPR 和 PPI 基本上呈现为一个固定关系，但将来出现的屏幕未必会遵循这个规律。

因此，有这样一个重要结论：

DPR 和 PPI 呈正相关，但不成正比，咱们没法经过特定的公式来计算它的值。

七、逻辑像素、逻辑分辨率

对于同一个元素，DPR 越大，渲染时须要的物理像素就越多。这是咱们上面得出的结论。

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

为了解决这个问题，咱们引入 “逻辑像素” 的概念。

平时咱们在 css 中写的 px 指的就是逻辑像素，而不是物理像素，一个逻辑像素能够表明一个或多个物理像素。

假设，咱们如今设置一个元素的css样式以下：

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

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

　　

dpr=1 时，1 个逻辑像素 对应 1个物理像素。

dpr=2 时，1个逻辑像素 对应 2个物理像素，才能保证元素大小。

dpr=3 时，1个逻辑像素 对应 3个物理像素，才能保证元素大小。

 

所以，咱们能够得出一个结论：

一个逻辑像素所表明的物理像素个数与该屏幕的 DPR 成正比。

即：逻辑像素 = 物理像素  / DPR

 

有了这个公式，咱们就能推导出屏幕的逻辑分辨率，也就是屏幕的逻辑宽度和逻辑高度。

• 逻辑宽度 = 水平物理像素 / DPR
• 逻辑高度 = 垂直物理像素 / DPR

好比 iPhone6 的物理分辨率为 750 × 1334，DPR = 2, 带入公式就能够得出其逻辑分辨率：

// 逻辑宽度
width = 750 / 2 = 375px
// 逻辑高度
height = 1334 / 2 = 667px

所以，iPhone6 的逻辑分辨率为 375 × 667 。在JavaScript中，也能够经过 DOM API 来获取屏幕的逻辑分辨率：

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

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

八、iPhone 常见的几种规格

 

3、Viewport

一、Viewport 究竟是什么？

咱们在写H5页面的时候，一般会在 html 的 head 中加入下面这句话：

这句话就是在设置页面的 viewport 。那 viewport 究竟是什么？为何要设置它？

简单来讲：viewport 是屏幕背后的一张画布。

 

下面，咱们将逐个理解 viewport 中的每一个概念。

二、Viewport 画布

浏览器会先把页面内容绘制到画布上，而后再经过屏幕窗口呈现出来。

画布的宽度可大可小, 当画布的宽度大于屏幕宽度时，画布上的内容就没法经过屏幕所有展现出来，用户能够经过屏幕手势来拖动画布查看被遮挡的部分。

若是没有在 html 中加 viewport 的设置，画布其实也是存在的，浏览器会给画布设置一个默认宽度 ，不一样平台的默认值以下：

画布的宽度能够经过 DOM API 来获取：

三、device-width 指的是什么？

device-width 指屏幕可视窗口在水平方向上的逻辑像素。

device-width 的大小能够经过 window.screen.width 来获取：

四、width=device-width 在设置谁的宽度？

width 指的是画布的宽度，device-width 是可视窗口宽度。

width=device-width 就是把画布的宽度设置为可视窗口的宽度，让画布上的内容彻底呈现出来。

设置了 width=device-width 以后，画布的宽度就和屏幕的宽度同样大了。

五、画布缩放 - scale

scale 是指画布以 device-width 大小为基准的缩放值。

initial-scale=1.0 也就至关于设置了 width=device-width

一般须要同时设置这两个值，这是由于二者在不一样平台有兼容性问题：

在iPhone 和 iPad 上，只支持 inital-scale=1 的设置，而在 IE 只支持 width=device-width ，因此二者同时设置，能够兼容全部的平台。

六、动态缩放机制

在没有给页面设置 viewport 的状况下，当画布宽度大于可视窗口的时候，浏览器会自动对画布进行缩放，以适配可视窗口大小。这样页面在不滚动的状况下也能呈现所有内容。

下面这个页面是PC端页面，没有作移动端适配，能够看出网页的内容依然能够彻底呈现出来，这是由于没有设置 viewport 而触发了画布的动态缩放机制。

经过 DOM API 能计算出浏览器确实对画布进行了缩放：

须要注意的是：

当没有设置 viewport 或者 设置了viewport 但没有设置 scale 的时候，才会触发浏览器动态缩放机制。

七、禁止动态缩放

给页面添加 viewport 设置，以下所示：

因为手动设置了 scale 的值，没有触发自动缩放机制，浏览器直接把宽度为 980px 的画布原封不动的展现出来了：

这种状况下须要经过滚动才能查看画布所有内容。

八、三个 Viewport

一般，咱们把画布称为 layout viewport, 把屏幕可视窗口称为 visual viewport。

而把设置 width=device-width 的画布称为 ideal viewport，即“理想视口”。

咱们一般在 html 中设置 viewport 就是为了获得理想视口，方便用户阅览。

 

4、响应式布局方案

响应式布局的目标是：用同一套代码适配全部的设备。

经常使用的布局方案有如下几种：

• 百分比

• vw

• Css Media Query

• rem

• flex box

下面是手淘团队移动端适配的协做模式：

设计师通常会把 iPhone6（750px） 做为设计稿，设计稿中的元素也都是基于750px进行标注的，固然这里的 px 指的是物理像素。

开发拿到设计稿后，根据iPhone6的 dpr 把标注中的元素大小换算成 css 中的大小，好比设计稿中按钮的宽度标注为40px, 则 css 中应该写成40/2=20px

而后再根据屏幕的逻辑宽度进行同步缩放（如：rem/vw 方案），就能够实现向上或向下适配全部设备。

 

5、总结

最后，咱们再回顾一下开篇提到的问题，其实不难理解，这是因为屏幕的 dpr 不一样致使的。

通常状况下，PC 屏幕 dpr 是 1，即 1个逻辑像素 = 1个物理像素，而移动端的 dpr 一般都是 2 或 3，所以也就须要 2个或 3个物理像素来渲染。

这也是 “移动端1px边框” 的经典问题，理解了 viewport，这个问题就不难解决了。

 

原创发布  @一像素   2020.01.06