移动端的视口/像素基本知识
一、屏幕尺寸
指屏幕对角线的长度，单位是英寸，1英寸=2.54cm
二、屏幕分辨率（物理像素）
指在横纵方向上的像素点，单位是px，1px=1个像素点。这里的1像素指的是设备的1个物理像素点。如第一点中的图，iphone6的分辨率为750*1334px，即是横向上有750个物理像素点，纵向上有1334个物理像素点。
三、像素密度（pixels per inch,PPI）
屏幕上每英寸可以显示的像素点的数量，单位ppi；屏幕像素密度与屏幕尺寸和屏幕分辨率有关。以上图的iphone6的为例： 开方(750*750+ 1334*1334)/ 4.7英寸 = 326 ppi
四、位图像素
1个位图像素对应1个物理像素，图片才能得要完美清晰的展现(不失真，不锐化)。要显示宽度为30px*18px（CSS像素）的照片，在DPR为2的情况下，对应的图片需要为60px*36px；DPR为3的情况下，对应的图片需要为90px*54px；基于此种情况，移动端的图片一般需要设计2套，以适应不同的像素比。
五、设备独立像素
设备独立像素是CSS像素和物理像素之间转换的很重要的关键点；在设置了width=device-width时，那么设备独立像素就等于CSS像素；
五、像素比
定义：设备物理像素比上设备独立像素；
公式：devicePixelRatio = 设备物理像素（分辨率） / 设备独立像素（近似CSS像素）；
以iphone6plus为例：DPR = 1080 / 414 ≈ 3
通过JS获取：window.devicePixelRatio
通过CSS获取：@media only screen and (-webkit-min-device-pixel-ratio:2){}
六、布局视口（layout viewport）
在移动设备上，为了容纳为电脑浏览器设计的网站，默认的布局视口的宽度远大于移动设备屏幕的宽度；布局视口的出现，在极大程度上帮助了桌面网站到移动设备上的转移。以下是常见的移动端浏览器的布局视口值，单位为px（CSS像素），该值是不可变的（布局视口不变，和性能有关系，如果布局视口变化了，那么就会触发重汇重排），可以通过document.documentElement.clientWidth来获取布局视口值。
当网页的宽度大于以上的值时，就会出现横向滚动条。
在这种情况下，以上面的iphone5为例，宽度占满的时候，需要640个物理像素，换而言之，需要980px的CSS像素，其对应的像素比为：640/980；而对于iphone6而言，宽度占满的时候，需要750个物理像素，换而言之，需要980px的CSS像素，其对应的像素比为：750/980；这里说明了，在没有设置width=device-width的情况下，针对不同的移动设备，该像素比值是变化不固定的，此种情况是难于做适配的。
另一种情况，设置了width=device-width的情况下，即是布局视口的宽度等于设备独立像素，这种情况下，CSS像素就等于设备独立像素了；
七、视觉视口（visual viewport）
用户看到的网站展示区域，一般视觉视口和设备宽度一致。并且它的CSS像素的数量会随着用户缩放而改变，单位是px（CSS像素）；该值是可变的（缩放情况下）。可以通过window.innerWidth获取。
八、理想视口
即是布局视口的宽度等于设备独立像素；通过<meta name="viewport" content="width=device-width"/>
九、缩放
1.用户放大：一个CSS像素的面积变大，视觉视口内的CSS像素个数变少，视觉视口的尺寸变小（能看到的内容变少了，所以视觉视口变小）；切记，布局视口的大小是不变的，没有设置width=device-width的情况下，布局视口是980px；设置了width=device-width的情况下，布局视口的大小等于设备独立像素。
2.用户缩小：一个CSS像素的面积变小，视觉视口内的CSS像素个数变多，视觉视口的尺寸变多（能看到的内容变多了，所以视觉视口变大）；切记，布局视口的大小是不变的，没有设置width=device-width的情况下，布局视口是980px；设置了width=device-width的情况下，布局视口的大小等于设备独立像素。
3.系统缩放：在meta标签中使用initial-scale=1.0，该initial-scale值改变的是布局视口和视觉视口，而width=device-width改变的是布局视口，所以下面的两个例子的效果是一样的；当布局视口超过视觉视口才会出现滚动条，滚动条和视觉视口有关的。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 7 <title>系统缩放1</title> 8 <style media="screen"> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 #div1{ 14 width: 187px; 15 height: 200px; 16 background: blue; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="div1"></div> 22 </body> 23 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1.0"> 6 <title>系统缩放2</title> 7 <style media="screen"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #div1{ 13 width: 187px; 14 height: 200px; 15 background: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div1"></div> 21 </body> 22 </html>
initial-scale值的变化对布局视口和视觉视口的影响：在iphone6下，该值变大的时候，CSS元素的面积变大，看到的内容变少了，所以布局视口和视觉是变小了；反之，设置initial-scale为0.5时，布局视口和视觉视口都会变大，变为750.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=2.0"> 6 <title>系统缩放2</title> 7 <style media="screen"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #div1{ 13 width: 100px; 14 height: 200px; 15 background: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div1"></div> 21 </body> 22 </html>
十、width=device-width和initial-scale之间的冲突
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=0.5"> 6 <title>冲突</title> 7 <style media="screen"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #div1{ 13 width: 375px; 14 height: 50px; 15 background: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div1"></div> 21 </body> 22 </html>
如果设置了initial-scale的值为2.0，那么布局视口和视觉视口为187.5px，而width=device-width设置的布局视口大小为375px；谁大听谁的，所以最终的布局视口和视觉视口的大小都是375px。
十一、完美视口
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
width=device-width：设置布局视口的大小等于设备独立像素；
initial-scale=1.0：设置布局视口和视觉视口的大小等于设备独立像素；
user-scalable=no：不允许用户进行缩放；
minimum-scale和maximum-scale分别这只最小的缩放为1.0，最大的缩放为1.0，表示不允许用户进行缩放操作。
