前端开发手机内置浏览器(含js函数)兼容性汇总之那些踩过的坑
这里会汇总一些移动设备(手机)的内置浏览器兼容性的js函数问题:
1、for... of... 坑爹指数:★★★★
for-of loop是ES6的语法,比较新,导致部分Android手机不支持,例如【华为】
当一个React的项目在多数手机正常运行时,这个时候有些手机就是不支持这个函数。原因是由于内置浏览器的版本过低,不支持一些新的JS函数。
解决:使用 原生for循环或forEach函数代替。
ps 事现日期:2016-06-23
2、str.startWith 坑爹指数:★★★★
这个也是js一些新的特性,当你在享受js操作字符串便利的同时,也承担着多数内置浏览器不兼容的风险,例如【华为】【低版本的iPhone】
解决:使用字符串的 indexOf() 函数替代
ps 事现日期:2016-04-103、str.search 坑爹指数:★★★★
这个也是js一些新的特性,当你在享受js操作字符串便利的同时,也承担着多数内置浏览器不兼容的风险,例如【华为】【低版本的iPhone】
解决:使用字符串的 indexOf() 函数替代
ps 事现日期:2015-04-08
4、window.open 坑爹指数:★★★
由于它打开的页面是popup类型,导致部分手机浏览器会阻挡并拦截弹窗,根本弹不出来,接下去的步骤就无法完成了。
解决:使用字符串的 window.location.href 函数替代
ps 事现日期:2015-10-10
5、ES2015 `` 语法 坑爹指数:★★★
这是ES6的新语法,支持字符串占位、换行拼接,很是好用,实际使用中,Android绝大多数浏览器不支持该函数,iPhone支持该语法。
`${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()} ${hour}:00:00`
解决:使用字符串的 ‘ + ’ 函数替代
today.getFullYear()+'-'+(today.getMonth() + 1)+'-'+today.getDate()+' '+hour+':00:00';
ps 事现日期:2016-03-24
6、[...Array(size).keys()] 坑爹指数:★★
这个是ES6的函数,在React项目中即使通过Babel编译,依旧会有部分低版本内核的手机浏览器不支持,例如华为等,导致js操作被阻断,接下去的步骤就无法完成了。
解决:使用 Array.apply(null, {length: size}) 函数替代
ps 事现日期:2016-04-15
7、ES6 数据解构之数组解构 坑爹指数:★★★
const [touchObj] = e.touches; 数据解构在Es6中很是常见,可是Android和Ios都不支持,只好放弃。
解决:使用原始获取数组下标 const touchObj = e.touches[0]; 函数替代
ps 事现日期:2016-08-10
8、IOS不支持js onBlur事件 坑爹指数:★★★
<input onFocus="alert('Support')" onBlur="alert('Not support Yet')">
解决:官方已知未解决Bug
参考: https://jira.appcelerator.org/browse/TIMOB-17343
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
解决思路:在整个可点击区域添加浮层,点击后模拟触发onBlur事件。
ps 事现日期:2016-10-20
9、Android不支持css scale缩放动画 坑爹指数:★★★★★
@keyframes scaleImg { from { transform: scale(1); } to { transform: scale(1.2); } }
解决:官方已知未解决Bug
参考:https://code.google.com/p/android/issues/detail?id=12451
解决思路:1)不使用动画 2)使用gif替换
/*Method 3*/ @-webkit-keyframes scaleImg { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(1.2); } }
ps 事现日期:2017-05-10
10、ES6 Array.prototype.find() 坑爹指数:★★★
es6新增的数组find函数,可根据需求搜索子项,Android6以下版本部分手机不支持。
解决:使用数组的 filter 函数替代,find返回子项,记得filter的时候取数组的index=0.
ps 事现日期:2017-03-16
11、ES6 Promise() 坑爹指数:★★★★
es6新增的Promise函数,主要用来解决js异步加载的问题,iPhone很积极的已经更新,但是低版本的iPhone和部分低版本的Android手机浏览器内核还不支持该函数,导致处理报错。
解决:复写Promise函数或使用bluebird.js兼容Promise函数,也可以使用babel转换代码,亦可以使用回调函数替代Promise写法.
ps 事现日期:2017-06-20
关于更多兼容性问题不断更新中。
若遇到其他不兼容的问题,请评论告诉我,我来整理,让更多坑里的人爬起来。