vue在低安卓版本的一些兼容性问题

刚开发公司项目要求在安卓5.0的系统进行适配，在这整理一下一些基本的兼容性问题。

1、首先是对ES6的一些新特性，低版本的安卓可能会不支持，这里需要引入两个包来进行转化，babel-polyfill和es6-promise

首先npm安装

cnpm install babel-polyfill

cnpm install es6-promise

然后再main.js里引入

import 'babel-polyfill'

import Es6Promise from 'es6-promise'

require('es6-promise').polyfill()

ES6Promise.polyfill()

最后在webpack.base.conf.js里 配置一下

module.exports = { 

　　entry: { 

　　　　"babel-polyfill":"babel-polyfill",

　　　　 app: './src/main.js'

}

这两个包能够解决大部分js的兼容性问题，不过也出过一些问题，在引入外部js的时候，里面的新语法有时候会报错，引入的十几个文件就那一个的新语法会报错，具体原因我也是很不清楚= =。

2、在一个就是弹性盒对块级元素的居中属性有可能会失效，所以尽量避免用弹性盒对块状元素进行居中，用绝对定位的上下左右设0，再加margin:auto进行居中。

3、border的边框不显示：对border设置1px或0.01rem的边框可能会消失，这个解决方法可以用2px或0.02rem代替。

4、逻辑像素和物理像素， 在使用rem作为单位的时候，其单位长度会跟随系统设置的字体大小变化而变化，所以我们要使用物理像素进行rem长度的计算而不是逻辑像素。

5、尽量避免使用fixed定位，移动端对fixed定位的支持很不友好，经常会出现一些奇奇怪怪的问题，很让人烧脑，所以最好还是避免或者减少fixed的使用。

6、移动端键盘按下的$event事件和pc端有些不同，在控制台上把事件打印出来以后会发现移动端可能会少一些属性，所以在使用键盘按下事件的时候，最好先看一下移动端有没有这个属性。

7、在移动端如何做页面自适应，使用弹性盒，或者高度用rem,宽度用百分比，具体如何实现就需要分具体情况了。

8、webview调试工具：chrome://inspect/#devices，手机连接电脑以后就可以通过这个调试webview程序，就像浏览器的控制台一样，非常方便，有时无法使用需要连一下外网。

9、移动端点击事件的300ms延迟，这是因为pc端需要监听双击事件引起的，用fastclick包就可以解决了。

遇到过好多适配方面的问题，没法一次都记得，先整理这些，等想起其他的我会再整理一下。