前端开发手机内置浏览器(含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-10

3、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

 

 

关于更多兼容性问题不断更新中。

 

若遇到其他不兼容的问题，请评论告诉我，我来整理，让更多坑里的人爬起来。

更多实例应用扫码体验：