前端开发中，尤其设计到移动开发中，经常涉及到像素的转换。比如在iphone6，开发时设置像素要把设计文稿中的标注除以2、移动开发中必须加一个viewport的meta标签、手机的尺寸和分辨率怎么和设计文稿对应的。本文将解决这些问题。首先要了解一下几个像素概念。
设备像素、css像素和设备独立像素
- 设备像素：又称物理像素，是设备显示的最小单位，对应设备上的物理像素点。不同设备的设备像素不同，屏幕越精细，设备像素所占的大小越小。
- css像素：又称逻辑像素，是独立于设备用于web开发的像素，就是你在css中设置的css。之所以有这个像素存在，是为了在开发过程中有一个统一的度量标准，在css中的1px，无论在什么设备上显示的长度都是一致的（不是严格的一样）。
- 设备独立像素：又称密度无关像素，代表一个可以由程序使用并控制的虚拟像素，在前端开发中等同于css像素
设备像素是设备的物理像素，决定于设备的精细程度。css像素或者设备独立像素是逻辑像素，方便开发人员只写一套css便可以适用于不同的设备。设备渲染页面的时候需要将css像素转化为设备像素，设备定义一个比例值来完成这一个转换。这个值就是设备像素比window.devicePixelRatio = 物理像素/css像素(这个的像素是指满屏时物理像素和css像素的个数);比如从iphone5开始，苹果推出了Retina屏幕，所谓Retina屏幕就是同样的手机尺寸，设备像素比原来多了1倍，设备像素比为2.这时css中1px代表了iphone5中的2个设备像素，如下图：
设备像素比一般是根据屏幕密度来设定的，屏幕密度的衡量指标是ppi(pixels per inch),即每英寸的像素数，ppi的计算公式如下图:
iphone的ppi如下：
ppi的密度分界和对应的设备像素比如下：
Retina视网膜屏幕指的就是ppi超过300的屏幕，也叫作超高密度屏幕。另外再说一点，chrome中调试移动页面的时候，上面显示的是设备像素值。用户缩放页面时改变的就是设备像素比，放大时，设备像素比变大，一个css像素代表的设备像素数变大，页面就会变大。
想要了解主流移动设备的设备像素比(device pixel ratio)可以参考以下两个网站：
http://screensiz.es/
http://www.devicepixelratio.com/
关于设计师和前端工程师之间如何协同：
一般由设计师按照设备像素(device pixel)为单位制作设计稿。
前端工程师，参照相关的设备像素比(device pixel ratio)，进行换算以及编码。
viewport
1 | <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> |
上面这段代码在移动端开发是必不可少的。它到底代表什么意思那？