许小珂在写这篇文章之前还没想好用什么标题，文章写了一大半了依然感觉写的挺乱的。权当是把自己的一些个人感悟进行下总结。

举个栗子
在分享之前许小珂先问大家一个问题：一个背景为width:640px;和height:1136px能不能再iPhone5上完全展示？大家都知道iPhone5的设备分辨率是640*1136，如果是这样的话是不是这个背景能正好在iPhone5上完全展示？
接下来咱们用代码去写出这样一个页面
css代码

.bg{
    width: 640px;
    height: 1136px;
    background-color: #666666;
    font-family: 'Microsoft Yahei';
    font-size: 150px;
    text-align: center;
}

html代码

<div class="bg">灰黑色</div>

大家会发现在模拟手机端的屏幕上这个背景只展示了2/3左右，并不能完全展示出来，这又是为什么呢？其实这里面涉及一个概念：css像素与设备像素

无可争议的是我们在代码内设置的px即为css像素，而iPhone5的设备分辨率是640*1136指的是设备像素。一般情况下在桌面上1px其实是等于1设备像素的。那么在移动端是不是一直都是1px都等于1设备像素？
首先，这里要分清几个概念：

设备像素
一个显示屏的成像原理是通过一系列的小点排列成一个大的矩形，不同的小点通过显示不同的颜色来显示成图像。这每一个小点被叫做一个物理像素。以许小珂提到的iphone5为例。iphone5的屏幕，分辨率是640设备像素*1136设备像素，意味着iphone5手机横向上排列了640个显像用的小点，在纵向上排列了1136个显像用的小点。另一个常见的数据叫每英寸像素取值（Pixel per inch，简称PPI），意思是每一英寸内的物理像素数量，也可以说是每一英寸内的物理像素密度。计算公式是


公式中的屏幕尺寸指的是屏幕对角线的长度。一个显示屏的PPI越高，说明在同一大小的屏幕上能显示更多物理像素，能给图像提供更多细节。

CSS像素
作为Web开发者我们整天在CSS里用px作为长度单位。这里的px指的是CSS像素。浏览器里的一切长度都是以CSS像素为单位的。在非高清屏幕以及未缩放浏览器的情况下，一个CSS像素等于一个物理像素；而在搭载了苹果公司的视网膜显示屏等高清屏幕（PPI特别高，一个屏幕上的物理像素点非常多）的设备上，如果一个CSS像素仍等于一个物理像素，那么网页上的各种元素就变得非常小，用户很难看清，因此高PPI的设备中，一个CSS像素通常等于两个甚至三个物理像素（浏览器自动设定，不同浏览器设定的会不一样）。

谈到这里还要说下另外一个概念：dpr:devivePixelRatio设备像素缩放比，

px指css像素单位，dp指设备像素单位。由此可以得到css像素与设备像素的转换公式：1px = dpr的平方 * dp（在平面上计算）。

这里咱们在回到第一张图，大家可以通过谷歌开发者工具发现iPhone5的css像素是320px*568px，那么这个值是怎么计算出来的？最主要的一点大家要知道iPhone5的dpr等于2，这个dpr等于2是什么样子的？这里咱们看一张图：

 

这张图就代表了在平面上dpr等于2的情况，一个css像素等于四个设备像素。
从纬度上来讲一个css像素就等于两个设备像素。即1px = dpr* dp。因此可以得出iPhone5的设备像素即640设备像素*1136设备像素等于320px*568px css像素。
那么如何判断一个设备的dpr值呢？
这里提供一组数据：


我们只需要计算出设备的ppi然后判断此ppi所在的范围就能得到设备的dpr值。
最后许小珂子在放一张图片作为此文章的总结：


文章到此终于确定标题了，本来想总结viewport的知识，没想到被许小珂总结成了css像素和设备像素的知识了，跨度其实还是挺大的，不过这样也好，先从最基础的总结，之后在写viewport的知识。