前端开发手机内置浏览器(含js函数)兼容性汇总之那些踩过的坑
baynkbtg 2016-06-20
这里会汇总一些移动设备（手机）的内置浏览器兼容性的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
关于更多兼容性问题不断更新中。
若遇到其他不兼容的问题，请评论告诉我，我来整理，让更多坑里的人爬起来。
更多实例应用扫码体验：
