移动端项目常见适配

1.视口设置

如果是vue项目，视口设置一般在根目录或public下的index.html
设置为理想视口，不允许用户缩放

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

2.解决click事件0.3秒延迟问题

安装fastclick

npm i fastclick --save

在main.js中引入和使用

// 引入fastclick
import fastClick from 'fastclick'
// 使用fastclick解决click事件0.3秒延迟
fastClick.attach(document.body)

3.解决不同机型border显示不一样的问题

比如定义1px的边框，在一些像素比较高的手机上显示，会编程2px或3px
添加一下css即可

@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
   
  position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
   
  content: "\0020";
  overflow: hidden;
  position: absolute;
}
.border::before {
   
  box-sizing: border-box;
  top: 0;
  l