移动端的meta viewport

什么是viewport

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

移动viewport的特点

移动端和桌面端不一样，它有2个视口(viewport)：可见视口(visual viewport)和 布局视口(layout viewport).

关于2者的区别，stack overflow有这样的解释：

想象下现在有一张不会改变尺寸和形状的大的图片，你手里拿着一个中空的框子(想象下砸空你手机的屏幕)，透过它你可以看到这张图片，并且这个框框的周围是用不透明的材料做成的，你只能通过中间的洞去看这张图片。你可以移动这个框子，靠近自己的眼睛的话可以看到更多的图片区域，也可以使它远离自己的眼睛，从而只看到这张图片的一部分小区域。

那张不可改变形状和尺寸的图片=布局视口(layout viewport)

你手中的中空的框子=可见视口(visual viewport)

也就是说我们在移动端用手指来缩放屏幕，其实改变的是可见视口(visual viewport)的尺寸，而布局视口(layout viewport)总是保持不变。

viewport设置

<meta name="viewport" content="参数名称=参数值（多个参数用逗号隔开）" />

主要参数有下面几个：

maximum-scale：用户可以缩放的最大值

minimum-scale：用户可以缩放的最小值

initial-scale：viewport的默认缩放大小

width：固定viewport的宽度

height：固定viewport的高度

user-scalable：是否允许用户缩放

前三个参数都是缩放相关的，它们的值是viewport的缩放大小，他们仅仅改变缩放大小，并不是改变viewport的实际大小。比如要让网页加载时候显示两倍大小就可以加上这个

<meta name="viewport" content="initial-scale=2" />

 

之后就是width和height，修改这俩东西就和我们在PC上访问网页时候用鼠标拖动浏览器来改变大小一样。或者说是浏览器（页面区域）在屏幕上的默认大小。可以是具体的数值，也可以用“device-width”和“device-height”把它设置成浏览器屏幕的大小。比如要把页面宽度固定到浏览器的屏幕上，防止出现横向滚动条就可以使用

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

 

最后一个是指定是否允许用户自己缩放，也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1，如果要禁止可以把它的值设置为0。就像下面这样

<meta name="viewport" content="user-scalable=0" />

 

设置了这个属性以后两个手指在屏幕上把它摸到高潮它也不会缩放。上面这些属性只要设置就可以让网页在Mobile设备下好好显示，我一般会禁止横向滚动条和用户缩放，就像下面这样

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

 

最后一个是指定是否允许用户自己缩放，也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1，如果要禁止可以把它的值设置为0。就像下面这样

<meta name="viewport" content="width=device-width,user-scalable=0" />

只要把他们用逗号隔开就可以了，不过有些浏览器不支持width和height设置固定数值（我这充话费送的破手机的默认浏览器就不支持）所以最好别用那个。