移动端web app开发备忘

最近要做个手机html5的页面,做些知识储备,重要的点记录下来以备后续。

1.devicePixelRatio:定义设备物理象素和设备独立象素的比例。css中的px可以看作是设备的独立象素,通过devicePixelRatio,就可以知道设备上的一个css像素代表着多少个物理像素,可以考虑devicePixelRatio+rem进行不同设备间的适配;

2.利用Image对象实现图片的懒加载,主要逻辑代码如下:

 

var len = queue.length;
		var counter = 0;

		for(var i = 0; i < len; i++){
			var img = new Image();

			img.src = Zepto(queue[i]).data("url");
			img.onload = function(){
				counter++;
				if(counter >= len){
					Logic.onLoadComplete();
				}
			}
		}

通过new Image()新建Image对象,然后监听其onload事件,当加载完成后进行加载完毕的处理。

 

3.Zepto.js,专为移动端web开发,更小更轻便,API和jquery类似。中文手册地址:http://www.html-5.cn/Manual/Zepto

4.SVG vs canvas,两种html5的浏览器绘图技术。

SVG所绘制的图像都是dom元素,因此支持事件处理,canvas的每次更新需要重绘;而且svg支持动画和滤镜。

对于动画的实现,canvas是不断的重绘画板,而svg是原生支持的。

Tagged: ,

Comments are closed.