移动前端中的 viewport

一、viewport

       移动设备上的视口是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但视口又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。在默认情况下，移动设备上的视口都是大于浏览器可视区域的，这是因为移动设备的分辨率相对于PC来说都比较小，所以为了能在移动设备上正常显示那些为PC浏览器设计的网站，移动设备上的浏览器都会把自己默认的视口设为980px或1,024像素（也可能是其它值，由设备本身决定），但后果是浏览器出现横向滚动条，因为浏览器可视区域的宽度比默认的视口的宽度小。

二、3个viewport

layout viewport（布局视口）

      一般移动设备的浏览器都默认设置了一个viewport元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题.iOS，Android基本都将这个视频识别率率设置为980px，所以pc上的网页基本能够在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。layout viewport的宽度可以通过document.documentElement.clientWidth来获取。

visual viewport （视觉视口）

    布局视口的宽度是大于浏览器可视区域的宽度的，所以还需要一个视区来代表浏览器可视区域的大小，即设备物理屏幕的可视区域，这个视口叫做视觉viewport.visual视口的宽度可以通过document.documentElement.innerWidth来获取。

ideal viewport（理想视口）

      理想的视口通常是我们说的屏幕分辨率。移动端手机屏幕通常不可以设置分辨率，一般都是设备厂家默认设置的固定值

     理想的视口的意义在于，无论在何种分辨率的屏幕下，针对理想的视口而设计的网站，不需要缩放和横向滚动条都可以完美地呈现给用户。

三，利用元标签对视口进行控制

meta viewport的6个属性：

width	设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

宽度能控制layout viewport的宽度，如果不指定该属性，layout viewport默认为980px或1024px（也可能是其它值，由设备本身决定），如果把layout viewport的宽度设置为移动设备的宽度，那么布局视口将成为理想的视口。

其实，要把当前的视口的宽度设为理想视口的宽度，既可以设置width = device-width，也可以设置initial-scale = 1，但有一个小缺陷，就是width = device-width会导致iphone，ipad横向屏不分，initial-scale = 1会导致IE横向屏不分，都以竖屏的理想viewport宽度为准。所以，最完美的写法两者都写上去，initial-scale = 1解iphone，ipad的缺陷，宽度=设备宽度解决IE的缺陷。

视口设置移动端自适应的方法":

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