移动端与pc端的兼容问题

1. 安卓浏览器看背景图片，有些设备会模糊，原因是手机的分辨率太小

解决方案： 用2X图片来代替img标签，然后background-size: contain

2. 防止手机中页面放大或缩小： 在meta中设置viewport user-scalable = no

3.上下拉滚动条卡顿： overflow-scrolling: touch;

4. 禁止复制选中文本： user-select: none;

5.长时间按住页面出现闪退：-webkit-touch-callout: none;

6. 动画定义3D硬件加速： transform: translate 3d(0,0,0);

7. formate-detection 启动或禁止自动识别页面中的电话号码，content = "yes/no"

8.a标签添加tel是拨号功能

9. 安卓手机的圆角失效： background-clip: padding-box;

10.手机端300ms延迟： fastclick

11. 横平时字体加粗不一致： text-size-adjust: 100%;

vue开发的项目，既有移动端又有pc端，但是移动端和pc端展示的内容不一样，同一个组件样式也不一样，移动端展示内容比pc端少，那这个时候可以在一个项目中写两份路由，一份移动端的，一份pc端的，这两份路由地址相同，对应的组件不同，在路由的入口文件里去判断渲染pc的路由还是移动端的路由。

通过媒体查询实现响应式（@media） 优点：适用于小型网页，用户交互较少的项目，代码用量较少； 缺点：在页面内容过多，用户交互过多的时候，如果通过 @media 来一个个改的话，那代码量可就很多了，而且也不方便维护。因此需要另一种方式来解决这个问题。