初入移动端jq+html5

刚接触移动端，记录一些小点
1、屏幕分辨率，1080P的概念，目前主流的640*960、640*1136（iPhone4和5）
2、设备分辨率：宽300~400；
3、设备像素比:window.devicePixelRatio,即屏幕分辨率/设备分辨率；目前流行的是2.
4,viewport

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, target-densityDpi=device-dpi">

可以让网页的宽度自动适应手机屏幕的宽度。 其中： width=device-width ：表示宽度是设备屏幕的宽度 initial-scale=1.0：表示初始的缩放比例 minimum-scale=0.5：表示最小的缩放比例 maximum-scale=2.0：表示最大的缩放比例 user-scalable=yes：表示用户是否可以调整缩放比例，target-densityDpi=device-dpi是针对安卓的，也是表示用户是否可以调整缩放比（貌似被废掉了）

5、移动端的touch对象。

$div.on('touchstart',function(ev){
    var touch = ev.originalEvent.changedTouches[0]
})

比如：touch.pageY ...

6、canvas中的getImageDate，要在服务器下运行，因为url跨域了
7、适合移动端的字体设置。

body{ font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;}

8、监听animation事件，webkitAnimationIteration animationIteration（为了兼容）

$text1.css('animation','1s infinite flash linear');
$text1.on('webkitAnimationIteration animationIteration',function(ev) {
                if (ev.originalEvent.elapsedTime == 3) {  
                    $text1.remove();
                    $text2.css('animation','1s infinite flash linear');
                    $('#beginEffect').on('touchstart',function() {
                        $(this).remove();
                        $('#c1').trigger('touchstart')
                    })
                }
            })

ev.originalEvent.elapsedTime 监听animation的执行次数，ev.originalEvent是转换为原生的event

9、transform，后写的先执行
10、当设置景深时， -webkit-perspective : 800; perspective : 800，先为元素设置宽高
11、检测transition的状态，是否结束。

$li.on('webkitTransitionEnd transitionEnd',function(ev) {
    //do something
}

12、在写切屏效果时，
第一，建个开关，当第一次结束时，才能执行第二次，
第二，记得阻止默认的touchmove事件

$(document).on('touchmove',function(ev){
    ev.preventDefault();
})