Vue中移动端的适配

Vue中移动端的适配

1. 视口的适配

• 在index.html中引入viewport适配

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

2.解决点击延迟

方案一

• 在index.html中引入

<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  <script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    //解决没有Promise
    if(!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
    }
  </script>

方案二

1. 下载 点击

npm install fastclick --save

2. 在入口文件main.js中引入，并调用函数

 import fastclick from"fastclick"
 //调用函数
 fastclick.attach(document.body)

3. 引入reset.css

点击
我常用的reset.css

在main.js中引入重置css

import './assets/css/reset.css'

友情提示

• 尽量不要在index.html中引入reset.css有时候webpack不识别