概念
-
物理像素（device pixel)
屏幕的像素，客观存在，比如iphone6的屏幕宽度像素为750，这是物理像素，X轴上有750个物理像素点
这是设备层面的
-
逻辑像素（设备独立像素device independent pixel）
独立像素是和设备无关的一个抽象，为了在不同的DPR屏上展示同一个东西，让这个东西大小看起来保持一致。
和DPR有关，可以理解为几个物理像素组成一个渲染单元，这个渲染单元就是独立像素
比如iphone6的屏幕宽度独立像素为375，意味者单个方向上用2个dp来当作1个dip。
这是操作系统层面的
-
CSS像素(px)
纯概率的东西，一般情况下CSS像素 == 独立像素，缩放的时候不再相等。
这是软件层面的
-
DPR
Device Pixel Ratio，dpr = dp / dip为什么iphone6 X轴上的物理像素是独立像素的2倍？
因为iphone6的DPR是2，也就是在X轴和Y轴上都用2个物理像素来当作一个独立像素，也就是用2*2个物理像素当作一个独立像素。
同理如果DPR为3，则是9个物理像素当作一个独立像素。
移动端上有所谓的2倍图，3倍图，这也是DPR引起的，我们设置图片的尺寸一般用css像素，比如375px，但是在iphone6上，如果图片真的是375px，由于dpr的缘故实际会用750个物理像素来渲染，导致图片放大，变得模糊，所以设计图片时要用750px，这就是2倍图，同理3倍图。即用独立像素 * DPR得到设计图的尺寸。
-
分辨率(resolution)
分辨率可以简单的理解为独立像素。（独立像素是操作系统层面的参数，所以是可以调整的）
改变分辨率只是改变独立像素的多少，并不会改变对应的单位物理像素数量，所以DPR不会变。
如果分辨率指物理分辨率，那就是物理像素的多少，这是固定的。
关于缩放
所谓缩放就是内容占据更多或更少的独立像素，但是此时内容的px像素数量是不变的，比如10px*10px的内容，放大后占据了更多的独立像素，但是px像素层面依然是10px*10px，因为此时1px 1dip，dip / px = 缩放比例，所以缩放实际就是放大或缩小了单位px像素的大小。
操作系统和浏览器的缩放都是一样的。
可以把分为3层理解，底层物理像素，中间抽象层独立像素，使用层px像素。缩放就是改变px的大小。
改变分辨率会改变渲染的独立像素的数量，进而改变px的数量；缩放会改变单位px的大小，也会改变能使用的px的数量（因为尺寸不变），即，放大，px放大，数量变少，缩小，px缩小，数量变多。体现在网页上就是，放大造成px数量变少，但是你的内容还是要那么多px来显示，造成出现滚动条，缩小造成px数量变多，容易出现空白。
浏览器相关API：
window.devicePixelRatio: 这不是严格的dpr，还和缩放有关。
window.devicePixelRatio = (dp / dip) * (dip / px) # 本身的dpr * 缩放比例 比如 dpr为2，如果浏览器缩放了200%，则此时为4，所以这里的window.devicePixelRatio更准确的是描述px和dp的关系。
以windows为例子：
- 物理分辨率1920*1080
- 缩放比例125%
- dpr为1
以X轴为例，由于dpr为1，独立像素则为1920，但是放大了1.25倍，所以px像素此时只有1920 / 1.25 = 1536，可以通过window.screen.width查看。同时根据计算公式可知window.devicePixelRatio此时为1.25。
又：
- 浏览器放大了300%
此时window.devicePixelRatio = 1.25 * 3，为3.75，1920 / 3.75 = 512，512px为浏览器最大宽度。
**所以：**最终都体现在px数量上，px数量的改变会影响内容的布局和显示。
这在网页布局上有很大作用，为避免出现滚动条，页面展示混乱，可尽量使用比例布局，而不指定具体的px大小，来适配更多的屏幕。