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

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

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


更多实例应用扫码体验:

前端开发手机内置浏览器(含js函数)兼容性汇总之那些踩过的坑

相关推荐