移动端//需要注意的（窗口适配、rem适配、延迟300ms、点击穿透问题、1px像素问题、样式reset）

参考：移动端点击事件touch、tap、swipe等详解
https://www.jianshu.com/p/67bae6dfca90

1、移动端视口配置

移动端视口配置

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

initial-scale: 初始的缩放比例；
minimum-scale: 允许用户缩放到的最小比例；
maximum-scale: 允许用户缩放到的最大比例；
user-scalable: 用户是否可以手动缩放；

2、点击延时 300ms 问题

由于移动端会有双击缩放的这个操作，因此浏览器在 click 之后要等待 300ms，判断这次操作是不是双击。

解决方案：

• fastclick 解决
• 禁用缩放：user-scalable=no
• 更改默认的视口宽度
• CSS touch-action

 在vue中使用 fastclick
 原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉
    // 安装
    npm install fastclick -S
    // 引入
    import FastClick from 'fastclick'
    // 使用
    FastClick.attach(document.body);

禁用缩放
   `<meta name = "viewport" content="user-scalable=no" > `
    缺点: 网页无法缩放

更改默认视口宽度
    `<meta name="viewport" content="width=device-width">`
    缺点: 需要浏览器的支持

css touch-action
    touch-action的默为 auto，将其置为 none 即可移除目标元素的 300 毫秒延迟
    缺点: 新属性，可能存在浏览器兼容问题

3、点击穿透问题

因为 click 事件的 300ms 延迟问题，所以有可能会在某些情况触发多次事件。

解决方案：

• 只用 touch
• 只用 click

4、rem 适配

rem（相对长度单位——相对 html 的 font-size，根元素 的长度）
设计稿750px，设计稿上根元素假设为10px；
当设备长度变化，对应根元素也要变化。

引入 rem.js 文件

(function (win) {
  var docEl = win.document.documentElement
  var time
  function refreshRem () {
    var width = docEl.getBoundingClientRect().width
    if (width > 1024) { // 最大宽度
      width = 1024
    }
    var rem = width / 375 * 50
    docEl.style.fontSize = rem + 'px'
    // rem用font-size:50px来进行换算
  }
  win.addEventListener('resize', function () {
    clearTimeout(time)
    time = setTimeout(refreshRem, 1)
  }, false)
  win.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      clearTimeout(time)
      time = setTimeout(refreshRem, 1)
    }
  }, false)
  // 当屏幕尺寸发生改变的时候  当页面重新加载的时候 都重新计算一下rem的值
  refreshRem()
})(window)
//  getBoundingClientRect()；该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，他返回的是一个对象，即Object,有6个属性 top 、bottom、right、left、width和height
//  以前getBoundingClientRect()是IE特有的，目前FF3+，opera9.5+，safari 4，都已经支持这个方法。
//  onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。
//  为了查看页面是直接从服务器上载入还是从缓存中读取，可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false

切记 需要设置基础字体 根据自己需求

html{
	font-size:100px;
}
body{
	font-size:16px//这里是给未设置字体的标签设置的保留字体大小 
}

参考：移动端开发 自适应rem js文件、rem适配移动端js文件 两种方法

5、多倍屏1px被显示成多像素问题

多倍屏1px被显示成多像素问题
// src文件夹中下载border.css。main.js 文件中引用 border.css

6、重置样式表（reset.css）

重置样式表（reset.css）
// src-assets-styles文件夹中下载reset.css。main.js 文件中引入 reset.css