21.HTML: viewport

viewport的深入理解

首先我们先想一个问题，一个宽度1000px的页面在一个逻辑像素320px的手机端上面是怎么显示的？

首先我们从小学初中时候说起，记得以前都是诺基亚手机，一个诺基亚手机已经很厉害了，博主那时候还没有手机，经常拿老妈的手机刷网页版的qq空间和玩一个叫纵横四海的游戏，那时候手机根本不能完全显示整个网页，只能显示一小部分，通过按钮上下左右移动位置拖动网页，这样体验很不好，于是，浏览器那边就提出了一个虚拟的viewport概念，ios的viewport一般设置成980px而android就比较多，通过这个viewport，移动端的浏览器就可以把整个网页显示在手机屏幕上，整个网页是被缩小的，字体非常难看，需要放大，我们学校的教务系统用手机访问就是这样，需要放大才能填写登录信息。所以，有了viewport之后，移动web设备上是完全显示一个1000px的页面的。

这里移动端浏览器干了两件事：

把整个页面在980px的viewport是渲染出来，这里我们一般称之为layout viewport

为什么需要这个980px的layout viewport来渲染页面呢，试想一下，如果我们把一个1000px的页面渲染在320px的手机端浏览器上，那么，排版就会发生错乱，会有问题，所以才需要一个980px的viewport渲染达到正确排版。

通过缩放，把整个页面缩小以至于浏览器能够完全显示整个网页。

然而，layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表 浏览器可视区域的大小，ppk把这个viewport叫做 visual viewport（度量viewport/视口viewport）。visual viewport的宽度可以通过window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。

我们可以这样理解，把手机分为两层，底层为layout viewport，手机浏览器把页面渲染在这个viewport上，顶层为visual viewport， 我们可以通过缩放控制显示多大的视口。

不管你是用PC端还是移动端的浏览器去访问一个页面的时候。你所看到的浏览器的窗口就是你visual viewport（通过window.innerWidth/height获取），对于移动端来说，就是你通过浏览器所看到的那部分大小，它的度量单位是px(css中的像素)。这个visual viewport通常是可以变化的，例如你对屏幕进行缩放，这样就可以改变visual viewport的大小，或者你移动屏幕的滚轮，这样就可以改变visual viewport的位置。

而layout viewport，它就相当于一个大的box，所有的内容都要在这个box里面显示。你通过visual viewport所看到的内容就是layout viewport上的部分内容。

把layout viewport想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架，你通过它来看这张大图。（译者：可以理解为「管中窥豹」）这个小框架的周围被不透明的材料所环绕，这掩盖了你所有的视线，只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是visual viewport。当你保持框架（缩小）来看整个图片的时候，你可以不用管大图，或者你可以靠近一些（放大）只看局部。你也可以改变框架的方向，但是大图（layout viewport）的大小和形状永远不会变。

当你进行页面缩放的时，你可以想象你拿着这个小框架离这张大图越来越近了，那么你所看到的大图的内容也越来越少了。原本在未缩放的页面上看起来很小的尺寸，现在通过viewport看上去变大了，事实上这部分的css的px值并没有变化，仅仅是因为进行放大后，css的1px的值所占的屏幕分辨率的值变大了。

同理，当你缩小整个页面的时候，看到大图的内容也越来越多，同时，原本看起来很大的尺寸，现在再通过viewport看上去的时候又变小了。同理,css的1px的值并没有发生变化,但是1px值所占的屏幕分辨率的值变小了。

content="width=device-width, 

user-scalable=no, 

initial-scale=1.0,

 maximum-scale=1.0,

 minimum-scale=1.0">

属性

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

。