问题:
通过vue-cli构建项目时,在移动端当input聚焦时页面自动放大,从而导致页面失真。
这里我们只需要将入口文件index.html做一下修改即可。
项目要目录下入口文件index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>qn</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
解决方法:
将meta标签viewport做一下修改即可,这样即可解决因input聚焦引起的页面放大。
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
参数说明:
width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例
达维营-前端网