- 添加 -webkit-overflow-scrolling: touch; 可以使页面自然滚动。
- 尽量使用transform和opacity完成sprite动画,减少recalculate、reflow等性能消耗。
- 基本的ios版本适配 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { } @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (max-device-height: 568px) and (orientation : portrait) { } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (max-device-height: 480px) and (orientation : portrait) { }
- 动画的同时,开始播放audio会造成顿卡现象,可以使用setTimeout来缓解性能瓶颈。
- flexbox在ios系统下完美展现(包括国外的android系统),但在部分国内手机下显示会有问题,建议慎用。
- 可以使用createObjectURL来展示web端通过file获取的图片,视频,音频等,一定要记得及时通过revokeObjectURL释放内存。