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包就可以解决了。

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

 

你可能感兴趣的:(技术分享,前端)