关于移动端像素问题

设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算（PPI）。

CSS像素是指与设备无关的像素，（device-independent像素），简称为“DIPs”在一个标准的显示密度下，一个CSS像素对应着一个设备像素。

 

<div height="200" width="300"></div>

 

上面的代码，将会在显示屏设备上绘制一个200x300像素的盒子。但是在Retina屏幕下，相同的div却使用了400x600设备像素，保持相同的物理尺寸显示，导致每个像素点实际上有4倍的普通像素点，如图所示：

 

在javascript中，“window.devicePixelRatio”可以用来获得相同的比率，虽然目前浏览器支持还有限。但这种技术将会慢慢被支持。

"window.devicePixelRatio"其实指的就是“devicePixelRatio”,我们来看看“window.devicePixelRatio”是什么？简单点说“window.devicePixelRatio”是设备上物理像素和设备像素（device-independent pixels (dips)）的比例。他有一个计算公式：window.devicePixelRatio = 物理像素/dips。

dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。