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)();
});
}

}