移动端视口

##名称解释
##物理像素（设备分辨率）

物理分辨率：显示屏的最佳分辨率，即屏幕实际存在的像素行数乘以列数的数学表达方式，是显示屏固有的参数，不能调节，其含义是指显示屏最高可显示的像素数。

（我们可以这样理解，如：iPhone5物理分辨率640*1136，那么他实际上横轴有640个点，纵轴有1136个点。）

##设备独立像素（逻辑分辨率）（dips）
设备独立像素 device-independent pixels(dips)是由设备自己确定的
iPhone5： 320*568

##设备像素比
设备像素比=物理像素/设备独立像素
window.devicePixelRatio = 物理像素/ dips
iPhone5的设备像素比为2；
（以上名称有点混乱：物理像素就是设备分辨率。大家一一对应）
个人意会： 从横向上，手机用2个设备独立像素来模拟1个物理像素

##iPhone具体的分辨率

如果我们设计的时候用单位px，可以说是物理分辨率尺寸。
如果我们设计的时候用单位pt，可以说是逻辑分辨率尺寸。

##默认视口宽度

大部分手机的视口默认宽度是980px（有个别手机是其他大小）;
获取视口的宽度
方法一： 浏览器中审查元素;
方法二： document.documentElement.clientWidth;

我们不写下面代码的时候，我们可以利用的宽度就980px

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

手机访问一个网页的时候，内部有一个虚拟容器的概念（就是viewport）。当不写上面代码的时候为980px;
当我们在里面写如下代码的时候,便会产生水平滚动条

<div style="width:1200px;">test</div>

很多浏览器端的网页的宽度设为980px，有一个目的就是当用手机去访问的时候，正好不产生水平滚动条。

很好，皆大欢喜。但是为啥还要后面很多复杂的概念呢？
。。。
因为pc端的屏幕很大，放980px宽度，我们每个字都可以看的很清楚。但是巴掌大的手机同样也放980px宽度的网页内容，上面的图片和字都太小了。

这个980px和上面的逻辑分辨率又是什么关系呢？
个人感觉是把这个980px按比例缩小为了逻辑分辨率。
980px --> 逻辑分辨率
如iPhone5：

如果不希望缩小，我们就可以去设置视口的大小（默认视口为980px）.如下代码：

<meta name="viewport" content="width=480"/>

然后将宽度为1200px的div放进去，会出现水平滚动条。980px的div就也会出现水平滚动条。
（在用浏览器模拟手机端实验的时候，会出现bug.不能展示出上面的效果。）

注意：
因为手机的设备像素比是不同的，所以这个值我们不能设定死。
所以我们需要写代码把他弄活。

<meta name="viewport" content="width=device-width">

这样我们设置的视口大小就等于设备的独立像素。

一般我们都写成

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

最后：我们网页就把这个视口作为最外面的容器，把body放入这个容器内。并且根据这个外部的容器放大缩小。