移动端web app开发备忘

欠伸展肢体,吟咏心自愉。这篇文章主要讲述移动端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 = https://www.songbingjia.com/android/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是原生支持的。
5.用到iscroll5,iscroll5的源代码中仅仅实现了scrollStart,scrollEnd,refresh的事件。而没有滚动进行时的事件,能够通过在源代码中添加一句来解决:
this._execEvent(' scrollMove' );

加入到源代码的_move:function的后面。这样在_move的最后会触发这个事件,从而进行监听。
【移动端web app开发备忘】





    推荐阅读