移动端 viewport 视口与像素（DPR、2倍图）详解

像素

物理像素

物理像素（设备像素）：主要指设备分辨率的尺寸单位，如电脑和手机设备的屏幕分辨率。屏幕是由一个个的物理像素点组成的。 例如电脑分辨率为 1920 X 1080 表示电脑分别在垂直和水平方向的物理像素点数。

CSS 像素

我们平常写的 CSS 样式中的 px 尺寸单位即是 CSS 像素，而每个设备屏幕也都有自己对应的 CSS 像素尺寸。

打开谷歌浏览器的开发者工具，调至移动端模式，如下图，这里的 375 X 812 表示的就是当前设备的 CSS 像素，也称之为设备独立像素。

设备像素比

DPR(Device Pixel Ratio)，设备像素比。它描述的是未缩放状态下，物理像素和 CSS 像素（设备独立像素）的初始比例关系。 即表示每 1px CSS 像素所能包含的物理像素个数。通常情况下计算公式为：DPR = 物理像素 / 设备独立像素（CSS 像素）。

DPR 越高，代表屏幕显示的精致程度越高。以 DPR=2.0 为例，则表示把一般的 4(即 2 X 2)个物理像素点数当作 1(1 X 1) 个 CSS 像素点数来用。

2 倍图 3 倍图的作用

比如我们一个分辨率像素为 100 X 100 的图片在浏览器上也是设置 CSS 像素为 100px * 100px, 在 dpr 为 1 的设备上显示没有什么问题。 但是如果是 dpr=2 的设备即水平或垂直方向上 1css 像素对应 2 个物理像素， 则水平和垂直方向上分别只需要 100/2=50 个 css 像素就可标准清晰地显示该图片，但此时如果该图片依然设置 100px * 100px 的 CSS 像素， 那么实际效果图片的每 1 个物理像素都会被拉伸成 2 个物理像素（1css 像素）以便能撑满 100px 的 CSS 像素，所以图片显示效果变模糊一些。 这时候使用 2 倍图(即 200 X 200 的图片)且 CSS 像素尺寸设置不变（100px * 100px）便可解决此问题。

所以当我们进行网页开发的时候，有时候就会需要 2 倍图，或者 3 倍图，这就是为了去兼容 DPR 为 2.0 和 3.0 的设备的。

视口

通俗的讲，移动设备上的视口（学术名称为 viewport）就是设备的屏幕上能用来显示我们的网页的那一块区域

布局视口

布局视口表示的是整个网页内容布局的矩形区域。一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的布局视口（layout viewport）， 用于解决早期的页面在手机上显示的问题。iOS, Android 一般默认都将这个视口分辨率设置为 CSS 像素的 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小， 一般 PC 的网页在移动设备都是通过手动缩放来控制合适的页面显示大小。