———— 学习前端开发过程中遇到了不少的坑，现在发现一个就记录一个吧
像素整理
之前一直对手机尺寸（iphone4s：3.5英寸）和分辨率（640*960）概念不是特别清晰，简单做一下总结。
设备像素 DP（device pixels）
一个屏幕都是由一个一个像素组建而成的，每个像素都对应一个小点。我们常见的 640*960 像素就说明了一个屏幕中包含了多少个小点（像素点），640列与960行像素点，乘一下就知道有多少个了，反正很多很多个。没错，手机中显示的任何图形和图像都是由这些小点组成。
PS：一个手机屏幕的尺寸并不能代表里面有多少像素点 —— iphone3GS（320x480）与iphone4s（640*960），屏幕大小却同为3.5英寸。
像素密度 PPI（pixels per inch）
每英寸长度的像素点数量。计算公式（引用自百度百科），勾股定理，很好理解。iphone4s-PPI=√(640^2+960^2)/3.5
设备独立像素 DIP （device independent pixels）
在web浏览器中，传统开发并不考虑到任何缩放，1px实际等于1个物理像素点（1pixel），如果引用到移动端。设置一个<div>高度为80px，那么理论上：
- iphone3GS（320*480），显示480/80=6个<div>元素
- iphone4S（640*960），显示960/80=12个<div>元素
这样同样大小的屏幕，显示的信息量就会完全不同，4s虽然能显示更多信息，但是屏幕太小反而其他信息视觉上显得小，效果不佳。（盗图）
在移动端上，我们会追求同一屏幕大小，显示出同样的效果，而对其物理像素做出调整，这时候我们需要用到dip。即在4S上用4个物理像素去实现3GS上1个物理像素的效果。（更加细腻的显示，4S屏幕也就是Retina屏）
一台设备上的DP和DIP一样，都是固定的。例如iphone的逻辑分辨率：
- iPhone5 ：分辨率 320 * 568，物理像素 640 * 1136，@2x（倍率）
- iPhone6：分辨率 375 * 667，物理像素 750 * 1334，@2x
- iPhone6 Plus ：分辨率 414 * 736，物理像素1242 * 2208，@3x
PS：在PC操作系统中，我们常会修改分辨率，这里修改的就是逻辑分辨率。但在前端移动开发的时候我们完全可以将它们当作定值。
设备像素比（DPR）
上面用4S 640*960 的物理分辨率，去实现 320*480 的逻辑分辨率：
（640*960）/（320*480） = 4，即1个逻辑像素在4s上要用4个物理像素（2 * 2）。这里我们定义为2倍（@2x）
由此得出：当这个比率为3:1时，使用9（3 * 3）个设备像素显示1个CSS像素，DPR为3（@3x）
结论：
DPR = 屏幕横向设备像素 / 理想视口的宽dpr = window.devicePixelRatio
CSS像素
css中使用的px就是css像素，“ width=12px ”。css像素也是一个虚拟像素，因为...
css像素的大小是很容易变化的。当我们缩放页面的时候，元素的css像素数量不会改变，改变的只是每个css像素的大小。也就是说width: 128px的元素在缩放200%以后，宽度依然是128个css像素，只不过每个css像素的宽度和高度变为原来的两倍。如果原本元素宽度为128个设备像素，那么缩放200%以后元素宽度为256个设备像素（css像素宽度始终是128）。
在没有任何缩放的情况下（即缩放值 = 1），1个CSS像素 = 1个DIP。
一般情况下，在缩放比例为1的时候。css像素100*100的图片会由设备独立像素DIP 100*100显示。每个DIP会根据DPR（又称倍率）来显示，如果倍率为 @2x，那么1个DIP会由4个设备像素显示。原本css像素100*100的图片，会由400*400的物理像素点来进行显示，这种情况下，图片会显得失真。最好使用css400*400图片来进行显示。
————————————————————————————————————————————————
我们在移动开发中也经常会用
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">这种情况下浏览器视口布局与网页布局大小一致，也不支持缩放。1个CSS像素=1个DIP，基于手机屏幕宽度来进行布局，更为直观。