说说移动端的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设置

主要参数有下面几个:

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

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

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

width:固定viewport的宽度

height:固定viewport的高度

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

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

 

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

 

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

 

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

 

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