ViewPort，逻辑像素/设备独立像素，物理像素/设备独立像素，分辨率，CSS像素，设备像素比DPR，像素密度PPI。
一。相关基础知识
小米note参数查看：http://www.mi.com/minote/specs/
以下都以小米note这个设备为例。
1.一般说手机的几寸是指：手机显示屏对角线的长度。1英寸2.54厘米。小米note为5.7英寸，约为14.478厘米。
2.物理像素/设备像素/像素：以一个很不严谨的方式去通俗的解释：这个屏幕是5英寸的，先把竖着等距画1919条线，这样横着看会有1920列，同理再横着画1079条线，竖着看会有1080行，这个过程中横线和竖线会相交，于是产生了一个个格子，这个格子很小很小，可以把这个格子就当做一个物理像素。它是描述分辨率大小的单位，注意呀，是一个单位，而且没有固定实际物理长度的，没有大小的。
3.逻辑像素/设备无关像素/设备独立像素：比如我们有一个元素是一个点，在手机A上（假设手机A一行有10个像素）占了一个像素，这个时候要把这个点显示到手机B上（假设手机B一行有100个像素），如果我们再按物理像素来，也给它分配一个像素，它占一行的百分之一，而在手机A上占十分之一，你会觉得放到手机B上一下变得好小，要是手机B一行有100000个像素，你那个元素都没法看了，因为看不见了。所以想到设立一个逻辑像素，这样从新说的话：这个元素在手机A上占了一个逻辑像素，在手机B上也占了一个逻辑像素，只不过在手机B上把10个像素当做一个逻辑像素用了，这样才能让不同设备的不同屏幕上呈现相同的效果。
----16岁程序员想成为画家.jpg
4.分辨率：再强调一次呀，分辨率的单位是像素（物理像素），平常俗话说的清不清晰呀，好高清哟。是在说另一个衡量分辨率的东西：PPI。要看要用什么描述了，比如你说分辨率是1920*1080那肯定是用物理像素来描述了，这个并不能说明它清不清，因为忽略了屏幕尺寸。
5.PPI：①PPI是Pixels Per Inch缩写，像素的密度单位，表示的是每英寸所拥有的像素数目。公式表达为 PPI=√（X^2+Y^2）/ Z （X：长度像素数；Y：宽度像素数；Z：屏幕大小）
②怎么说呢，它是连接像素世界和物理世界的桥梁纽带（你不能确定一个像素是多少大小），物理单位内的像素越多，密度越高，PPI越大，能更清晰的显示画面。
③从公式可以看出来，它涉及2个因素，分辨率和设备尺寸大小。设备显示屏越小，分辨率越高，这一刻更清晰。
④其实，PPI过了一定程度，我们一般人就已经感受不出来，视力有限。乔哥说：“当你所拿的东西距离你10-12英寸（约25-30厘米）时，它的分辨率只要达到300ppi这个‘神奇数字’（每英寸300个像素点）以上，你的视网膜就无法分辨出像素点了。”
6.CSS像素：它其实就是个概念性的东西，和设备像素（物理像素）不对等的。不缩放页面的情况下等于逻辑像素（设备独立像素）。其实CSS用的像素就想它是逻辑像素，因为我们设计网页时，希望是那个px是不变的嘛。
7.设备像素比DPR：DPR ＝ 设备像素/设备独立像素=物理像素/逻辑像素。怎么说呢，看我上面的图：2个屏幕都假设逻辑像素是16，然后左图的设备像素是16（4*4），而右图的设备像素是64（8*8），所以左边的设备屏幕的DPR是1，右边的DPR是4。只要两个元素的逻辑像素是一样的，那这个元素在左右两个设备里所带给我们的视觉大小是一样。分析一波：2个元素要是逻辑像素一样，就会保持一样大小，这时，DPR越大，所占的设备像素越大。再想：当不缩放的情况下，DPR=设备像素/CSS像素。再想，一个设备生产出来了，它的设备像素是固定的，它的设备独立像素也是固定的（即逻辑上理想化，比如元素在A设备上它是占一个逻辑像素，在B设备上它也是一个逻辑像素，它不会受到设备的影响），那它的DPR也是固定的。但是我们这个都是根据一台设备来说的，不同的设备不就等于设备像素是变化的嘛。
二。Viewport
1.具体详细的解释我就没了，我只是想说下我的理解。
2.Viewport是站在浏览器的角度来看的，被说有3种，Layout Viewport，Visual Viewport，Ideal Viewport。
3.补充
1)
先说几个东西，你打开浏览器+F12后，在控制台输入“window.innerWidth”,"document.body.clientWidth","window.outerWidth",最大化浏览器，缩小浏览器，切到手机界面分别去看下3个情况下的他们的值。
①window.innerWidth:是你的浏览器的可视区域的实时大小（包括了滚动条，但手机端一般没有滚动条），比如你又一个1900px（CSS的px）宽的网页，而window.innerWidth=1300px（CSS的px）是指你现在通过浏览器窗口可以看见这个1900px网页的1500px部分，其余的要你用滚动条去调了。
②document.body.clientWidth:就是当前浏览器下，浏览器可以容纳的网页文档的大小（如果你把html和body的margin，padding，border都设为没有），其实就是layout viewport。
③window.outerWidth:返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动），正因为这样当你用手机打开浏览器或者把浏览器最大化，这个时候它是你的设备的逻辑大小（平时我们说我们设备的屏幕，要不是说几寸--这个是物理视觉上的感知大小，如果说分辨率--这是一行所包含的像素多少，而像素是一个单位，没有固定大小的。如果要用CSS中的px像素来衡量这个屏幕的大小就是逻辑上的大小，即用CSS的px来衡量大小）
更多请参看：http://blog.csdn.net/jcy472578/article/details/19041897（权侵删）
2）
电脑上：其实电脑上的都不用去测，因为一般来说，电脑上的所说的分辨率，比如我的1920px*1080px（这个px就是等价于CSS中的px，也就是说电脑的分辨率就是它的逻辑大小）。
手机上：手机上是不能缩放浏览器的，以小米note+uc为例，通过测“window.innerWidth”,"document.body.clientWidth","document.body.scrollWidth","window.outerWidth"，我得到小米手机的当前最新版uc的window.innerWidth=1572px，document.body.clientWidth=980px，window.outerWidth=393px,document.body.scrollWidth=1700px(我的网页宽度)。
就这么说吧，1700px是我们在pc端设计的网页宽度（CSS中的px），393px是我们手机的逻辑大小（就是用CSS中的px去衡量手机屏幕宽度），980px其实就是这里的Layout Viewport。
总结一下：
我的测试代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> html,body{ margin:0; padding:0; border:none; } </style> </head> <body> <div style='width:200px;height:50px;margin-bottom:20px;background:red;'>200px</div> <div style='width:400px;height:50px;margin-bottom:20px;background:blue;'>400px</div> <div style='width:600px;height:50px;margin-bottom:20px;background:green;'>600px</div> <div style='width:800px;height:50px;margin-bottom:20px;background:yellow;'>800px</div> <div style='width:980px;height:50px;margin-bottom:20px;background:gray;'>980px</div> <div style='width:1200px;height:50px;margin-bottom:20px;background:pink;'>1200px</div> <div style='width:1700px;height:50px;margin-bottom:20px;background:pink;'>1700px</div> <script> window.onload=function(){ alert('inner:'+window.innerWidth); alert('canseebody:'+document.body.clientWidth); alert('outer:'+window.outerWidth); alert('allbody:'+document.body.scrollWidth); alert('availwidth:'+window.screen.availWidth); } </script> </body> </html>
4.
①layout viewport：用来承载网页的视窗，手机上你可以用document.body.clientWidth获取。网页比作画，这就像画布，把网页缩放在layout viewport上面。下面有两部分代码，A网页是超过一般layout viewport默认的980px的，B网页是一般默认的layout viewport的一样大。你发手机上观看下，会发现字体什么的大小是不一样的，因为大的网页你要放到980px宽的layout viewport上，是要进行缩小的。而980px的则不用。
A网页（1700px宽）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> html,body{ margin:0; padding:0; border:none; } </style> </head> <body> <div style='width:200px;height:50px;margin-bottom:20px;background:red;'>200px</div> <div style='width:400px;height:50px;margin-bottom:20px;background:blue;'>400px</div> <div style='width:600px;height:50px;margin-bottom:20px;background:green;'>600px</div> <div style='width:800px;height:50px;margin-bottom:20px;background:yellow;'>800px</div> <div style='width:980px;height:50px;margin-bottom:20px;background:gray;'>980px</div> <div style='width:1200px;height:50px;margin-bottom:20px;background:pink;'>1200px</div> <div style='width:1700px;height:50px;margin-bottom:20px;background:pink;'>1700px</div> <script> window.onload=function(){ alert('inner:'+window.innerWidth); alert('canseebody:'+document.body.clientWidth); alert('outer:'+window.outerWidth); alert('allbody:'+document.body.scrollWidth); alert('availwidth:'+window.screen.availWidth); } </script> </body> </html>
B网页（980px宽）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> html,body{ margin:0; padding:0; border:none; } </style> </head> <body> <div style='width:200px;height:50px;margin-bottom:20px;background:red;'>200px</div> <div style='width:400px;height:50px;margin-bottom:20px;background:blue;'>400px</div> <div style='width:600px;height:50px;margin-bottom:20px;background:green;'>600px</div> <div style='width:980px;height:50px;margin-bottom:20px;background:gray;'>980px</div> <script> window.onload=function(){ alert('inner:'+window.innerWidth); alert('canseebody:'+document.body.clientWidth); alert('outer:'+window.outerWidth); alert('allbody:'+document.body.scrollWidth); alert('availwidth:'+window.screen.availWidth); } </script> </body> </html>
②Visual Viewport：这就是你通过你的手机浏览器，可以看见网页的内容大小。比如我上面的A网页放到UC浏览器上，我只能看到这个网页的1572px大小的部分，其余的部分我需要通过滑动滚动条才能看见。可以用window.innerWidth获取
③Ideal Viewport：它的大小就是用CSS的px来衡量设备屏宽的大小（CSS的px来衡量）。它是根据你的设备来说的，那你的ideal viewport的大小是特定的。可以用window.outerWidth获取。
举例说吧：①苹果6s：1334 x 750 像素分辨率（物理像素），326 ppi，5.44英寸。逻辑像素375px*667px（这个才是我们网页中对应的px，也可以说是真的只有那么点地方给你放你网页设计时的CSS元素。
1）.那这个逻辑像素怎么算呢，不好意思，它跟尺寸没关系，跟物理像素没关系，跟ppi也没关系，它就是手机制作方给它制定好的。
比如三星的手机
②.三星S3：1280x720分辨率&4.8英寸，S4：5英寸1920x1080分辨率&5英寸，S5：1920×1080分辨率&5.1英寸，S6：2560x1440分辨率&5.1英寸，S7：2560x1440分辨率&5.1英寸
1）从这上面我们得到了什么，它的屏幕尺寸几乎当它没变过。而它的分辨率越来越高，这以为什么，只是PPI高了，单位物理长度里的像素多了，对我们而言是同样尺寸里面每个像素更加微小，我们根据感觉到了清晰（虽然过了300多感觉不到了）
2）我要告诉你的是以上所有三星手机的逻辑大小（用CSS中的1px去等同效果到手机上）都是360px*640px（这个px就是CSS中的px，1:1关系）。
3）这个“逻辑大小”是手机方去制定的，他们觉得多少合适，就设置多少（比如做屏幕的时候，它的屏幕分辨率决定下来了，也就是一行多少个物理像素定了，那他们再去考虑CSS设计的比如一个10px长的元素在屏幕该占多宽比较合适，去规划一个比较合理的逻辑大小）。这个逻辑大小其实就是Ideal Viewport（它要看不同设备的具体多少了）
5.为了更好地理解，我用实际例子来总结：
如上面A网页代码，我在电脑端设计了一个宽达1700px的网页（CSS的px），我要放到小米note手机的uc浏览器上。如果直接缩放到手机的屏幕上（想想一些早期的手机），这个手机屏幕的大小指的是Ideal viewport的大小，那你想想看把一个宽为1700px（css的px）缩放到一个宽为393px的显示区域内，网页上的元素还有法看嘛。所以他们就想了一个办法，弄出一个虚拟的layout viewport，用这个区承载网页，这样即使是缩放，也不会太厉害。想像一下你和你的一个朋友，你在一个四面都是墙的房间里，你朋友在外面，你出不去，他进不来。这个时候，你朋友说想给你看个长为1700px的画，于是你在墙上打了个长方形的洞，因为你力气有限，只能打出宽为1575px的洞（就是你的网页），所以你只能看到1575px宽的部分，想看右边的时候，等叫你朋友去拉一下。我们的设备所能让我们看见的整个网页的大小区域，就是visual viewport。这样还不是很舒服，因为是经过缩放的。字体什么的会很小。所以人们就想到，如果我们设计了一个10px大小的元素（css的px），我觉得这样的大小视觉上挺舒服的，恰好那么大小，更希望到了手机屏幕上还是显示差不多那么大小，让我们视觉上感受到差不多。于是我们就让承载网页的Layout Viewport的大小和当前设备的逻辑大小（CSS中的px表示）一样，因为这样的话，就等于说没有缩放，你pc端设计元素为10px大小，到了手机上显示效果一样。但是我要多说一点，其实你用尺子去量，pc端的10px大小的元素在这个时侯物理长度上还是不一样的，因为我们眼睛看电脑时会比较远，看手机时，我们会离得比较近，总之他们的设计会让你在视觉上，pc的10px到了手机上没有变化，还是那么大。有人会问，把你的网页放到只有Ideal viewport这么点大的区域，不会放不下吗？不是又回到最初的模糊问题吗？所以呀，你用这个设计的时候要用自适应，响应式去让你的网页在手机端显示的时候宽度最大不超过这个Ideal viewport。
6.mata设置viewport：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
“width=device-width”设置viewport的Layout Viewport为设备的宽度（其实device-width就是ideal viewport），比例通常设置为1，就是layout viewport（默认出厂的承载网页的默认宽度）等于ideal viewport的宽度。这样就能让那个网页适应你的设备了。
设置了这个会让layout viewport 等于当前设备的Ideal viewport，并且那个Visual Viewport也是等于Ideal Viewport大小。
这个常见的设置作用就是：让承载整个网页的Layout viewport的大小等于Ideal viewport的大小，比例为1就是要把网页放缩倍数。
一句话说就是，把缩放scale倍的网页以左上角为起点放在了宽为width的可视区域内，出了可视区域外，就会有滚动条，要滑。
举例：一个网页宽为500px，可视区域为500px，那么这个网页恰好地显示，如果设置比例为2，那么就是等于说把这个宽为500px的网页放大成一个宽为1000px的网页放在了宽为500的可视区域，显然横向只能看到这个网页左边的500px。
一个链接：特别是他后面特供的苹果官方的内容很好，像百度的前几页全是抄来抄去，甚至都不愿意这写几句自己的角度看。链接权侵删！
http://blog.sina.cn/dpool/blog/s/blog_7d7322470102uz90.html
结尾：我用了2个整天，接近24个小时，基本看完百度出来的前3页相关内容，自己也思考了，试验了，写了又删又写，但是我知道语言上或者根本上的东西肯定还不够懂。如果有错误不恰当或者错误之处，请指出，谢谢大家。
