问题:
通过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 - 允许用户缩放到的最大比例