移动端视口

名称解释

物理像素（设备分辨率）

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

（我们可以这样理解，如：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

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

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

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

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

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

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

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

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

一般我们都写成

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