关于移动端屏幕缩放设置问题-html、css

问题描述

将 web 页面嵌入移动端后，默认可以将页面放大拉伸的效果，或者一些控件（比如搜索框）属性自带放大效果，这让移动端窗口放大的时候不能查看页面全部元素。可以通过设置如下属性将其禁用，具体操作如下：

---

原因分析：

这是因为默认窗口缩放设置maximun-scale：允许用户的最大缩放值；user-scalable：是否允许用户进行缩放，默认属性为允许 yes 或 1，而不允许则需设置为 no 或 0；默认meta标签中这两个属性是没有的。

---

解决方案：

首先，找到程序的入口页面（我使用的是Vue为index.html）

其次，在 meta 标签中添加如下两个属性即可：
maximum-scale=1.0, user-scalable=0
代码：

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

需要注意的一点：meta标签在html页面中只有一个会被编译，如果有多个meta标签，则需要合并为一个meta标签。