设备像素，设备独立像素，CSS像素，viewport

虽然设备像素，设备独立像素，CSS像素这三个东西好像跟平时写CSS没有什么直接的联系，但是如果要理解诸如viewport , srcset , size这些东西，还是需要了解一下的。

一 简略版

1. 设备像素：平时所说的分辨率，比如 iphone6s 的分辨率是 1334*750

2. 设备独立像素：一台设备上程序用来描绘数据的一个个的“点”，也就是虚拟的像素。以前设备像素对应一个设备独立像素，后来出现了高分辨率的手机，不可能再一个设备像素对应一个设备独立像素了，因为这样东西会被缩小，看不清。（想象一下两台尺寸相同的手机，A的分辨率是B的三倍，那么同一张图片在A上的面积 = B上的面积 / 9。）
   所以一般高像素设备都是多个设备像素显示一个设备独立像素。
   可以在浏览器控制台输出 screen.width/height查看设备独立像素。

3. 设备像素比（DPR）：设备像素/设备独立像素，（手机宽设备像素/手机宽设备独立像素）设备像素比越高渲染越精致。
   比如，iphone6s 的分辨率是 1334*750，设备独立像素是 375 * 667，那么它的设备像素比就是 750 / 375 = 2
   可以在浏览器控制台输出window.devicePixelRatio查看设备像素比。

4. CSS像素：写CSS的时候我们所用的像素px。应该说在PC端CSS像素就是设备独立像素，但移动端就不一定了。

5. Viewport：浏览器放内容的区域，一般移动设备都是980px。浏览器会根据viewport布局然后缩放到屏幕大小。这里的像素指的就是css像素了。
   可以在浏览器控制台输出window.innerWidth查看Viewport大小。

6. 屏幕尺寸：屏幕对角线的长度，以英尺为单位。

7. 像素密度（PPI）：每英寸屏幕拥有的像素数。

二 详细版

1. 设备像素（device pixel）

也是物理像素，设备能控制显示的最小单位。可以看成屏幕上的一个个无法再拆分的点。

假设一个设备像素比是 1 的移动端用户对网页进行缩放，网页中有一个300px的div，放大的时候这个div会不断变大，但是它的CSS像素是不变的（还是300px，CSS像素点放大了），它的设备独立像素和设备像素变大了（CSS像素不一定等于设备独立像素！一台设备的设备像素比始终不变）（比如，放大两倍，那么这个div的设备像素就变成600px了）。

看下图（浅色图层是CSS像素，深色图层为物理像素）：

1. 原始：没有进行缩放的时候，CSS像素：物理像素 = 1:1

   
   
   

   图1-CSS像素：物理像素 = 1:1

2. 缩小： CSS像素：物理像素 < 1:1

   
   
   

   图2-CSS像素：物理像素 < 1:1

3. 放大：CSS像素：物理像素 > 1:1

   
   
   

   图3-CSS像素：物理像素 > 1:1

2. 设备独立像素（device-independent pixel，DIP）

可以认为是计算机坐标系统中的一个点，这个点是给程序控制和使用的，是虚拟的。现在的高分辨率屏幕会用多个设备像素来显示一个设备独立像素。

一台设备上的设备独立像素和设备像素一样，都是固定的。

设备中有相关系统把设备独立像素或者CSS像素转化为物理像素。

ios设备上用screen.width和screen.height得到设备独立像素。也就是视网膜屏的ipad和非视网膜的ipad返回值是一样的。

android设备上貌似返回的是物理像素。

用screen.width和screen.height查看设备独立像素。

3. 设备像素比（DPR）

物理像素/设备独立像素，也就是一个虚拟像素对应多少个物理像素。（横坐标轴上或纵坐标轴上）

所以设备像素比越高，内容的渲染会更加精致。

比如，某一台手机分辨率（设备像素）是480*800，纵向手持的宽度（设备独立像素）是320px，那么设备像素比就是480/320=1.5.

 

4. viewport 和

用innerWidth/innerHeight可以查看页面的viewport。

viewport是一块区域，浏览器根据这个区域来计算宽度是百分比的元素的宽度。描绘图案。

一般来说PC端端viewport跟浏览器的大小是一致的，移动端的viewport 宽度大多都是980px，可见移动端的viewport比真实的移动端屏幕大多了。

图4-移动端的viewport

在Chrome浏览器上设置一个模拟器，宽度（设备独立像素）360px，这时候在控制台分别打印出innerWidth 和outerWidth，截图如下：

移动端viewport比其设备独立像素宽度大许多

怎么让我们看到整个页面呢？浏览器渲染完页面后，会按比例缩小，直到我们在屏幕上可以看到整个页面：

在viewport上渲染页面之后按比例缩小

可以看到，字体变得超级超级小。

这时候，在这个屏幕上，CSS像素是980px，设备独立像素是360px。也就是说现在一个设备独立像素点对应差不多3个CSS像素点！

那怎么让一个设备独立像素点对应一个CSS像素点呢，我们不想要让字变得太小啊！

就是用来解决这个问题的。

width=device-width把viewport宽度设置称为设备的设备独立像素宽度了。这时候一个CSS像素点就对应一个设备独立像素点了！看一下效果：

width=device-width

这时候控制台打印 innerWidth 和 outerWidth，会发现，他们已经一样大了：

width=device-width

再说一下initial-scale=1，这个表达式表示页面的原始缩放比例为1。如果为2，那么页面中元素会放大一倍。但是viewport大小不变。