一、在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自帶的一個方法