深入浅出Viewport设计原理

---

一、基础概念斜体样式

1.屏幕尺寸

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

对角线的长度公式：

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

英尺公式：

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

2、物理像素

我们在手机屏幕上看到的画面，本质上都是由一个个发光的物理像素组成，物理像素是构成屏幕图像的最小单元。
我们常说的屏幕分辨率，就是指这个屏幕上拥有多少个物理像素。 通常，设计师给的UI设计稿上的“px”指的就是物理像素。

3.像素密度 – PPI

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

计算PPI，可以先利用勾股定理计算出对角线上的像素数，然后再除以屏幕尺寸，即：

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

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

比如，iPhone3GS 和 iPhone4 拥有相同大小的屏幕尺寸。但前者的分辨率是 320480，可以算出PPI为 163，而后者的分辨率是 640960, PPI 是326。
这就导致 iPhone4 在画面呈现上比 iPhone3GS 更加清晰和细腻。

4.PPI 导致的问题

左图和右图分别代表两块尺寸相同的屏幕，长度和宽度均为 5cm，屏幕上的每个方格代表一个物理像素点。
唯一不同的是，左边屏幕分辨率为5 × 5，而右边屏幕分辨率为 10 × 10 。
现在屏幕上放了一个按钮，宽度为3px，高度为1px，css 样式如下：

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

从图上效果可以看出，虽然我们为两个按钮设置了相同的样式，但右屏上的按钮比左屏上的按钮小了很多。
所以我们会发现，相同尺寸的屏幕，像素点越多，每个物理像素点看起来就越小，从而导致渲染出来的图像就会越小。
也就是说，设置相同大小的样式，屏幕的 PPI 越大，渲染出来的图像就越小。

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

5.缩放因子 – DPR

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

从图上可以看出，屏幕的 PPI 越大，需要的物理像素就越多。如果以第一个屏幕为基准，三个屏幕对应的物理像素数，可以用一个倍率来表示，即 1x、2x、3x。
我们把这个倍率叫做“缩放因子”。缩放因子是移动端响应式的关键因素。
而在软件开发过程中，我们所说的“DPR”其实指的就是缩放因子。 DPR 是 “device pixel ratio” 的缩写，即设备像素比。

6.DPR 和 PPI 的对应关系

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

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

对于同一个元素，DPR 越大，渲染时需要的物理像素就越多。

平时我们在 css 中写的 px 指的就是逻辑像素，而不是物理像素，一个逻辑像素可以代表一个或多个物理像素。

一个逻辑像素所代表的物理像素个数与该屏幕的 DPR 成正比。即：
逻辑像素 = 物理像素 / DPR

有了这个公式，我们就能推导出屏幕的逻辑分辨率，也就是屏幕的逻辑宽度和逻辑高度。
逻辑宽度 = 水平物理像素 / DPR
逻辑高度 = 垂直物理像素 / DPR

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

二、Viewport

1.Viewport 到底是什么？

我们在写H5页面的时候，通常会在 html 的 head 中加入下面这句话

代码如下（示例）：

<meta name="viewport" 
content="width=device-width, initial-scale=1.0">

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

2.Viewport 画布

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

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

画布的宽度可以通过 DOM API 来获取

3、device-width 指的是什么

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

device-width 的大小可以通过 window.screen.width 来获取：

4.width = device-width 在设置谁的宽度?

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

5.画布缩放 – scale

scale 是指画布以 device-width 大小为基准的缩放值。
initial-scale=1.0 也就相当于设置了 width=device-width

6.三个Viewport

通常，我们把画布称为 layout viewport, 把屏幕可视窗口称为`visual viewport。
而把设置 width=device-width 的画布称为 ideal viewport，即“理想视口”。

在这里插入图片描述

我们通常在 html 中设置 viewport 就是为了得到理想视口，方便用户阅览。

总结:

Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性,它的作用是为同一网页在不同设备的呈现，提供响应式解决方案。