看了许多关于设备像素、视口的博客，有一部分内容写的不是很清楚，而且每篇博客的知识点的讲述也有些差异，看了许多都快把自己弄懵了，都不知道怎么理解才好，下面是我的总结。
设备像素
对于设备来说，有两个设备像素：物理像素、独立像素。
物理像素
指的是设备屏幕的物理像素，任何设备的物理像素数量都是固定的。
屏幕分辨率的意思是，设备屏幕上的物理像素个数。
比如iPhone 6 的屏幕分辨率为750像素*1334像素，表示在宽度上，有750个像素点，高度上有1334个像素点。
看看下面这组数据：
| 手机类型 | 屏幕尺寸 | 分辨率 |
|---|---|---|
| Huawei P8 | 5.2英寸 | 1080*1920 |
| Apple iPhone 6+ | 5.5英寸 | 1080*1920 |
不同英寸大小的设备上，其分辨率怎么会相等呢？
在同一个设备上，一个物理像素所代表的物理长度是固定不变的；
在不同设备之间，一个物理像素所代表的物理长度是可以不同的；
JavaScript获取屏幕的物理像素尺寸
window.screen.width;
window.screen.height;
可通过此链接查询设备物理像素。
独立像素
又称为CSS像素，这是一个抽象的概念，指的是Web编程中的逻辑像素。他与物理像素之间的比例取决于屏幕的特性（是否是高清屏），以及用户进行的缩放比例，由浏览器自行换算。
iPhone 6的物理像素（屏幕分辨率）为750像素*1334像素，而其CSS像素为375像素*667像素。当在某个div中设置其宽度为375px时，刚好能够占满屏幕宽度，即1个CSS像素=2个物理像素，我们可以在浏览器中尝试一下：
为了让大家看的更清楚，我给此div添加了红色右边框。
CSS像素大小什么时候会变化？
-
当缩放屏幕的时候
正常情况下，占4个物理像素；
缩小一倍时，占1个物理像素；
增大一倍时，占16个物理像素； -
在不同的设备上的时候
前面说过，在不同设备之间，一个物理像素所代表的物理长度是可以不同的， 那么同样的CSS像素，在不同的设备上，其占的物理像素的数目是可能不一样的。
CSS像素和物理像素的区别：
像素密度(PPI)
每英寸像素（Pixels Per Inch），显示器单位面积上像素的数量。每英寸像素值越高，屏幕能显示的图像越精细。
Retina
有研究表明，人类肉眼能够分辨的最高像素点密度是300每英寸像素。超过300每英寸像素的屏幕被常常称为Retina显示屏，这个概念最早由苹果公司于2010年推出iPhone 4手机的时候提出。
PPI计算
iPhone 5，分辨率640*1136，屏幕尺寸：4英寸，则：
iPhone 6，分辨率750*1334，屏幕尺寸：4.7英寸，则：
OPPO R9，分辨率1920*1080，屏幕尺寸：5.5英寸，则：
设备像素比(DPR)
Device Pixel Ratio，指物理像素与CSS像素的比例。
dpr=物理像素 / CSS像素。
可通过window.devicePixelRatio获取
在dpr为2的设备中，设置css像素为1px的，在设备中是占2个像素点，如下图：
iPhone 6的物理像素为750 * 1334，而设置其CSS像素为375 * 667即可占满屏幕，因为其dpr为2。
在不同的设备中，CSS像素所呈现的大小都是一样的，不同的是1个css像素所对应的物理像素个数是不一致的。屏幕分辨率越高，图像越清晰。
学习进步离不开网友的支持，希望大家以后多多支持，能够指出文中不足与疑惑的点，我会为大家一一解答。有兴趣的小伙伴可以加入QQ群：852590787
