移动开发兼容性问题及性能优化
兼容性问题:
iOS 5.0- 的Date构造函数不支持规范标准中定义的YYYY-MM-DD格式,如 new Date('2013-11-11') 是 Invalid Date, 但支持YYYY/MM/DD格式,可用 new Date('2013/11/11')
IOS(7.1.1版本)使用webapp模式时滚动元素无法滚动到头,解决办法是设置 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 让APP占用整个屏幕空间布局。参考官方文档
IOS(7.1.1版本)滚动元素中设定其中某个元素的 innerHTML 属性一定机率导致画面闪动(估计是触发了重绘),解决办法是设置文字时使用textContent属性。
IOS(7.1.1版本)动态改变滚动元素中某个元素 top 属性一定机率导致画面闪动,解决办法是使用 translateY 替代
IOS(7.1.1版本)通过-webkit-overflow-scrolling: touch方式设定的滚动元素时,如果滚到头的时候拖动,会出现页面的整体滚动,解决办法见https://github.com/chemzqm/scrollfix/blob/master/index.js
IOS8一个页面内播放超过15个video之后触发解码器错误,将不能继续播放其他video。
三星I9100 (Android 4.0.4)不支持display:-webkit-flex这种写法的弹性布局,但支持display:-webkit-box这种写法的布局,相关的属性也要相应修改,如-webkit-box-pack: center;移动端采用弹性布局时,建议直接写display:-webkit-box系列的布局
touchmove事件在Android部分机型(如LG Nexus 5 android4.4,小米2 android 4.1.1)上只会触发一次解决方案是在触发函数里面加e.preventDefault(); 记得将e也传进去。
性能优化:
1、尽可能多的利用硬件能力,如使用3D变形来开启GPU加速;
2、尽可能少的使用box-shadows与gradients;
3、尽可能的让动画元素不在文档流中,以减少重排(采用position:absolute,fixed);
4、优化 DOM layout 性能;