用现在的手机浏览器打开一个传统的(即仅针对PC版进行优化)网页,大多数情况下可以发现它也能在手机这样的小屏幕上完全显示出来,只是得放大页面才能看清楚。这样的效果是因为这些浏览器把页面放在一个虚拟的窗口(Viewport)中,并且通常这个虚拟的窗口会比屏幕宽,这样就可以保证在渲染这类网站的时候不至于会导致布局混乱的场景。
不过有时候,我们可能不需要浏览器这样做,要想覆盖默认的画布缩放设置,可以借助于viewport meta元素。如下面这个示例:
<meta name="viewport" content="initial-scale=2.0, width=device-width" />
其中content="initial-scale=2.0表示是将页面放大两倍显示,如果缩放比例设置为1.0,表示浏览器将按照其视口的实际大小来渲染页面;
width=device-width则告诉浏览器页面的宽度应该等于设备宽度,即会按照设备宽度的实际大小来渲染页面。
另外还可以控制页面可缩放的范围,如:
<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5" />
这意味着允许用户将页面最多放大至设备宽度的3倍,最小压缩至设备宽度的一半。既然可以控制缩放的范围,那就一定能锁定而禁止缩放。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
不过一般情况下,我们不应该限制用户的选择。