前言： 最近在开发快应用，遇到一个问题，长宽为2048的图片，展示在7201560的屏幕上面，在使用getImageData获取像素点的时候，只能获取到当前屏幕分辨率的像素点，也就是只能获取到7201560这些的像素点，所以充充电，学习各个像素之间的关系。
快应用里面的解释：
DP是Android开发中常见的单位，也称为：设备独立像素（Device Independant Pixels）；
DP的计算公式为： 屏幕宽度的DP值 = 设备屏幕分辨率的宽度 / DPR = 设备dpi / 160；
以下所有的参数都是针对上面这个小米手机来：
设备像素/物理像素/pt
小米的分辨率是 7201560 那么屏幕上一共是有 7201560 个点，就是设备像素，也叫做 pt,是绝对单位，1pt = 1/72 (inch), inch 及英寸，而1英寸等于2.54厘米，一出厂数量就固定了，永远不会变，只跟分辨率有关系，
css像素/设备独立像素/逻辑像素
就是样式里的px，是相对单位，大小不固定，在标屏幕上来说，1px就是1pt，在二倍屏幕上 1px = 2pt
像素密度(PPI)
1英寸面积上的设备像素点的数量，计算公式是： 屏幕分辨率的平方相加再开根/屏幕尺寸
PPI越大代表设备像素点越多， 图像越清晰；PPI如果 * 2，设备像素点数量 * 4，那么每一个点占的空间就被压缩，缩小成原来的1/4；
DPR - 设备像素比
devicePixelRatio，简称为 DPR，用来描述物理像素与设备独立像素的比例，其值等于 “物理像素 / 设备独立像素”。 小米的屏幕分辨率为： screenWidth*screenHeight。 720 * 1560 其实就是屏幕密度，当前手机的是2， 屏幕密度：screenDensity
Retina
苹果公司在2010年的WWDC上发布了iPhone4，第一次向世人展示了retina屏幕，并在后续发布了一系列r屏产品。
所谓“Retina”是一种显示技术，可以将更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。
Retina 既不是指分辨率，也不是单独指PPI，而是指视觉效果。我们一般称 devicePixelRatio 大于或等于2的屏幕为 Retina 屏幕(r 屏)，否则为 非 r 屏。
两块面积相同而PPI不同的屏幕，自然是PPI大的那块总像素数量多，其展示细节的潜力和能力也越大，如下图所示，只用4x4个像素来表达一条曲线，自然不如8x8个像素更加细腻平滑。后者的PPI是前者的2倍，后者像素数量则是前者的4倍。
Retina的原理
受 windows操作系统的影响，多数人心中会产生这样的逻辑：分辨率越高，字会显得越小。这是因为整个屏幕的面积主要由像素面积构成，即在相同面积下，分辨率越高，像素数量也越多，单个像素的面积也一定越小。于是高分辨率就对应着小像素，而像素小，则由像素构成的文字就小。所以就有了『分辨率越高，字会显得越小』的印象。
类似的就比如 腾讯游戏cf里面的分辨率，越高人物越小，800*600 显示最模糊，人物最大
可是，苹果的r屏产品并没有让显示的文字变得很小，这又是怎么回 事呢？既然苹果产品的2倍r屏所包含的像素数量约为同面积非r屏的4倍，即每个像素尺寸约为非r屏像素的1/4，那为什么显示出来的文字没有缩减成1/4呢？
这是因为操作系统的HiDPI渲染方式，它决定了一个文字或图标最终以多少个像素来表达。2倍 r屏它在表达屏幕上每个元素时，都使用了4倍于非r屏的像素个数。这样算下来，像素尺寸为1/4，像素数目为4倍，于是最终渲染出来的文字和图标的大小与非r屏的相当。
举例说明，对一个标准屏来说，渲染一个 2px*2px 的盒子将会使用 2px* 2px 物理像素，如我们的普通电脑屏；但是对于一个 2 倍屏来说，渲染一个 2px*2px 的盒子将会使用 （2px* 2） *（2px* 2） 物理像素，如我们的 iPhone 4、5、6、7
Retina 屏幕的适配兼容
由于 devicePixelRatio 不再是1，我们的物理像素与设备独立像素不再对等，所以在实际网页开发时面临了2个问题：图片虚化、1px边框变粗
兼容问题1：图片虚化
我们知道，位图（png, jpg, gif等）是由一个个像素点构成的，每个像素都具有特定的位置和颜色值，我们称之为位图像素，如下图：
当一个位图在标准屏显示时，一位图像素对应的就是一物理像素，这样就保证了一个完全保真的显示。但是当在 2 倍屏下时，物理像素面积是图像素面积的4倍(css 中的1设备独立像素相当于2物理像素)，图片需要要放大四倍（宽高各两倍）来保持相同的物理像素的大小，这样就会丢失很多细节，造成失真的情形，也就是我们常说的图片虚化问题。
那么怎么解决该问题呢？我们可以把要使用的图片扩大一倍，如要用的图片大小为 2px 2px，我们可以使用 4px 4px 的图片然后设置图片大小为 2px * 2px，这样对于2倍屏则正好，而标准屏则减少像素取样（一定程度上的浪费
CSS 元素宽高 1px*1px，在 2倍 Retina 屏幕下，实际渲染物理像素 2px*2px，在非 Retina 屏幕下，实际渲染物理像素 1px*1px 。和物理世界的绝对比较，它也是个相对的单位
