目录：
一、项目地址
二、布局
1、按屏滚动会碰到什么问题？
2、flexbox会碰到什么问题？
3、fixed定位需要慎用。
三、动画
1、CSS动画与Canvas动画性能优劣分析
2、当缩放动画碰上硬件加速
3、动画由Javascript来维护还是css维护的思考
四、特性
1、如何解决音频播放预加载与延时的问题
2、重力感应
3、启动原生应用
4、地理定位
五、其它
1、字体图标应用设计环节的打通
2、当transform碰上模糊
六、数据
1、用户环境
一、项目地址
1、TGA移动游戏官网
TGA城市拉力赛
2、UP+邀请函
3、天天酷跑里约进击版
二、布局
1、按屏滚动会碰到什么问题？
问题：
按屏滚动即用户滑动屏幕翻页，屏幕自动锁定到当前页。我们会碰到的问题：
1）、页面100%高度包含地址栏高度，当地址栏存在时，会有部分内容被隐藏，如下图所示：
2）、如何阻止浏览器默认滚动事件更好？
解决：
1）、重置<html>高度；
document.documentElement.style.height = window.innerHeight + 'px';
2）、默认事件禁止touchmove比touchstart更好，否则还需要单独处理<a><input>等问题。
document.documentElement.addEventListener('touchmove', function(e){ e.preventDefault(); });
2、flexbox会碰到什么问题？
问题：
自适应高度/宽度的flex元素内，子元素尺寸以百分比为单位（如height:100%）无效。
解决：
需要将子元素设为绝对定位。
3、fixed定位需要慎用。
问题：
在ios系统的浏览器中，页面加载时偶尔会出现抖动情况。
解决：
使用绝对定位或flexbox模拟解决。
三、动画
1、CSS动画与Canvas动画性能优劣分析
问题：
目前移动端动画，特别在H5游戏与强交互性网站应用非常普遍，常用的实现方式是CSS（硬件加速）与Canvas，但缺乏完整的性能分析数据，我们在选择动画实现方式时还是存在纠结。
解决：
选用高中低不同配置不同系统的4款设备，进行了一轮测试：
1）、测试DEMO：
Canvas: 2个元素
Canvas：10个元素
DOM：2个元素
DOM：10个元素
2）、测试数据：
红色代表警告数据，一般60以上较为顺畅。
特征 \ 测试机型
iPhone 4s
（iOS6）
iTouch 4
（iOS5）
三星i9250
（Android 4.0）
三星gt s6358
（Android 2.2）
预计市场份额
中高端（>50%）
中端（35%）
低端（<15%）
Canvas: 2个元素
110
105
95（丢帧）
20
Canvas：10个元素
110
65
65（丢帧）
10
DOM：2个元素
115
80
100
12
DOM：10个元素
60
30
50
5
3）、测试结论：
a、CSS动画更为流畅、但内存占用过高，动画元素在5个以内更为推荐；
b、Canvas动画存在丢帧现象，这一现象在android中低端手机中表现更为明显；
c、5个以内动画元素，选用CSS动画，80%的设备帧频可达80以上。
2、当缩放动画碰上硬件加速
问题：
如下图所示，如何平滑地实现底部导航的缩放呢？
1）、不能直接用scale来缩放，这样会造成文字的缩放与虚化；
2）、不能通过 height的变化来更改高度，这样不能启用硬件加速。
解答：
需要分拆实现，高度变化用translateY来做，单独对里面的图标使用scale。
代码：
: :: scale(0.5, 0.5);}
3、动画由Javascript来维护还是css维护的思考
近期制作的几个动画较多的网站，在动画的调整与维护上花了不少时间，于是有了以下思考。
1）、判断优劣维度
开发效率、维护、性能
2）、具体分析
a、由CSS维护。
实现：
结合transition和animation，将动画时间轴写死在CSS中。
开发效率：高。
结合现有配套工具，能够快速完成动画制作。
维护：差。
如果动画涉及回调函数执行，时间轴同时存在于CSS与Javascript中，维护成本会大大提升。如果涉及判断与循环，动画效果将同时由CSS与Javascript来维护，代价太高。
性能：高。
动画无需解析Javascript，减少DOM操作，性能较Javascript的方式更高。
b、由Javascript维护。
封装动画框架，底层调用CSS动画，时间轴由Javascript来维护。
开发效率：高。无需考虑各平台兼容性，配置参数即可完成动画，对于复杂动画，也可开发配套工具。
维护：好。动画效果、动画逻辑，全部由Javascript来维护，动画可控性更高，维护变得很轻松。
性能：较高。由于底层还是调用CSS动画，DOM操作次数有限，性能损耗并不会太高。
3）、总结。
对于弱交互，无逻辑的动画，可以选用CSS的方式。对于复杂动画，更推荐由Javascript来维护。
四、特性
1、如何解决音频播放预加载与延时的问题
问题：
通过对各个平台下进行音频特性测试，存在问题如下：
IOS6
Android2.3
Android4.0
Audio标签base64
不支持
不支持
不支持
预加载
不支持
支持
支持
自动播放
不支持
支持
支持
不同声音同时播放
支持
支持
支持
播放延时
无
无
无
Web audio
支持
不支持
不支持
解决：
问题/平台
IOS4-5
IOS6-7
Android2.3-4.2
预加载
不支持
Web audio
(Base64-> ArrayBuffer)
Audio对象
代码：
封装类：
相关文章
精彩导读
热门资讯
关注我们
