目錄

• Vue中移動端的适配
• • 1. 視口的适配
  • 2.解決點選延遲
  • 3. 引入`reset.css`

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
           

1. 在入口檔案

   main.js

   中引入，并調用函數

import fastclick from"fastclick"
 //調用函數
 fastclick.attach(document.body)
           

3. 引入

reset.css

點選

我常用的reset.css

在

main.js

中引入重置css

友情提示

• 盡量不要在

  index.html

  中引入

  reset.css

  有時候webpack不識别