html5在移动开发中的准则

• 尽量使用单页面开发(SPA)
• 慎重选择前端UI框架
• 动画、特性使用准则(60fps)
• 长度单位使用rem

浏览器消耗最小的css属性

• 位置-tranform: translate(x,y,z)
• 大小-tranform: scale(n)
• 旋转-tranform: rotate(ndeg)
• 透明度-opacity: 0..1

http://csstriggers.com/

实现手机点击事件

基于touchstart、touchend和touchmove三个基础事件实现点击事件

结合jquery代码如下:

$(function() {
    var size = $(window).width()/18; //设备宽度除以18
    $("html").css("font-size", size);
    var myscroll = new IScroll("#file-list"); //用ISscroll实现内容滚动
    
    $("#file-list li").bindtouch(function() {
        $(this).remove();
    })
});

$.fn.bindtouch = function(cb) {
    attachEvent($(this), cb);
};

//实现点击函数
function attachEvent(src, cb) {
    $(src).unbind();
    var isTouchDevice = 'ontouchstart' in window || navigator.msMaxTouchPoints;
    if (isTouchDevice) {
        $(src).bind("touchstart", function(event) {
            $(this).data("touchon", true);
            $(this).addClass("pressed");
        });
        $(src).bind("touchend", function() {
            $(this).removeClass("pressed");
            if ($(this).data("touchon")) {
                cb.bind(this)();
            }
            $(this).data("touchon", false);
        });
        $(src).bind("touchmove", function() {
            $(this).data("touchon", false);
            $(this).removeClass("pressed");
        });
    } else {
        $(src).bind("mousedown", function() {
            $(this).addClass("pressed");
            $(this).data("touchon", true);
        });
        $(src).bind("mouseup", function() {
            $(this).removeClass("pressed");
            $(this).data("touchon", false);
            cb.bind(this)();
        });
    }
    
}