html5 viewport使用方法示例详解

2019-01-28 17:49:26刘景俊

maximum-scale
—-最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如,如果你将这个值设置为“2.0”,那么这个页面与target size相比,最多能放大2倍。

user-scalable
—-用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为根本不可能缩放。

所有的缩放值都必须在0.01–10的范围之内。

例:1.设置屏幕宽度为设备宽度,禁止用户手动调整缩放


复制代码

<meta name=”viewport” content=”width=device-width,user-scalable=no” />

2.设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放


复制代码

<meta name=”viewport” content=”width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>