一、在public文件夹中的html文件进行配置:
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=1.0">
使移动端用户手指拖动放大缩小无效化(页面比例1:1);
二、引入reset.css对页面样式进行重置: (可到网上去下载)
1. 在src目录下的assets文件夹中创建一个styles文件夹 把下载好的reset.css文件放到styles文件夹中
2.在项目中应用resets.css文件:
在入口文件main.js中引入resets.css文件
import './assets/styles/reset.css' //样式重置文件
三、引入border.css文件:(1像素边框的解决方案)
1. 在src目录下的assets文件夹中的styles文件夹 把下载好的border.css文件放到styles文件夹中
2.在项目中应用border.css文件:
在入口文件main.js中引入border.css文件
import './assets/styles/border.css' //1像素边框的解决方案
四、解决300毫秒点击延迟的问题:
1.安装一个第三方模块
npm install fastclick --save // 安装依赖
2.在项目中引入这个依赖
import fastClick from 'fastclick' //300毫秒点击延迟问题的解决方案(尤其是移动端)优化用户体验
3.使用fastclick
fastClick.attach(document.body);//fastclick自带的一个方法