Vue移动端项目中,页面限制用户缩放【防止页面被缩小和放大】

Vue移动端项目中,页面限制用户缩放【防止页面被缩小和放大】

用vue脚手架【vue-cli】生成的项目中,在index.html页面的head标签中,有一条mate标签是:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

如图:
在这里插入图片描述

maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。

所以,应在mate标签中添加maximum-scale=1.0,user-scalable=0这两句语句,就可以防止页面被用户缩小和放大了。

完整mate标签代码:

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

如图:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/AI_U20/article/details/88133021