移動端web app開發備忘

標籤：dev   重繪   獨立   css   data   length   移動   ack   定義   

近期要做個手機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是原生支援的。

5.用到iscroll5,iscroll5的原始碼中僅僅實現了scrollStart,scrollEnd,refresh的事件。而沒有滾動進行時的事件，能夠通過在原始碼中添加一句來解決：

this._execEvent('scrollMove');  

加入到原始碼的_move：function的後面。這樣在_move的最後會觸發這個事件，從而進行監聽。

移動端web app開發備忘