http://blog.csdn.net/s82ygg04/article/details/56495887

本文主要是介紹開發移動端web相冊這樣一案例用到的前置知識。

一、移動端樣式

移動端更接近手機原生的方式。

如下是一個angular mobile的demo的例子：

?

移動端demo做成這樣的好處：

• 在手機端瀏覽器中打開，接近原生app應用。
• 打包成Android或者ios的app，以原生app呈現

二、移動端web開發調試工具

因為移動端主要的瀏覽器內核是webkit，所以可以用chrome開發。可以模擬UA和分辨率。

模擬觸摸行為，注意touch和click區別。

也可以開啟其他模擬。

三、移動端開發tips

?1、兼容性

Android和ios都是webkit內核，firefox os是greasemonkey內核。

2、 其他差異

棄用事件mousedown,mouseup,click。

使用手勢操作代替鼠標輸入/輸出事件

響應式布局

css3代替DOM animation動畫效果

（為兼容IE:PC端用setTimeout定時器，定時修改DOm元素的style屬性實現動畫）

?優勢：css3使用設備GUP渲染，動用硬件設備的計算能力做展示，效率高。

四、移動端開發框架和庫

1、移動端開發框架和PC端對比

PC端：兼容ie，冗余代碼，但是計算效率高。

移動端和PC相比：輕? 重效率 ，希望在3g網絡加載更少的代碼，加載更快。

2、移動端開發框架

移動端開發框架：jquery mobile ,angular mobile ,簡單的還用不到框架，通過組件做復雜應用非常簡單。我們做的頁面簡單，談不上完整的app效果，用不到復雜應用框架。

3、移動端開發庫

移動端開發庫：zepto.js

也可以用純原生的javascript的API。

zepto也除了提供一些API，也提供了些插件，比如touch和gesture,。

zepto.js庫和其他移動端框架區別，可查資料。

touch.js獨立于zepto.js存在，單獨在github庫中。

五、touch事件

1、touch事件

touchstart---》touchmove---》touchend和touchcancle。

當滑動屏幕時，來了個系統事件，比如來了個電話，此時就會進入接電話面板，整個的觸摸事件就會被cancle掉,就會觸發touchcancle事件。

?

zepto.js的touch事件，在原生touch事件基礎上做了封裝，依賴于zepjs的一些插件，touch.js暴露的事件

• tap事件 觸摸
• singleTap事件 單次觸摸和doubleTap事件
• longTap長按事件
• swipe,swipeLeft,swipeRight,swipeUp和swipeDown滑動事件。

2、為什么不能用click

• click事件300ms延遲
• touch事件支持多點觸摸，click不支持
• 手勢操作

六、canvas優化技巧

1、優勢：觸發物理設備GPU渲染

使用convas代替image標簽做圖片展示。

通常來講，Image標簽展示一張圖片是用瀏覽器本身來做渲染的。

當一個圖片很大的時候，

或者一個網頁中有很多張大的圖片的時候，

而你的手機性能又不是特別好的情況下，圖片展示就會特別卡。

這個卡通常是在滑動圖片，滾動條滾動圖片的時候，會感覺圖片非常卡，因為沒有觸發物理設備本身的GPU來渲染。

如何觸發物理設備GPU渲染？使用Canvas。

2、drawImage API

有一本書《HTML5 Canvas》來介紹canvas，內容太多，下面只介紹一個API。

drawImage API：把一張原本使用Image標簽的圖片畫在Canvas上面。

• drawImage(image,x,y);在Canvas上繪制圖片。
• drawImage(image,x,y,width,height)；在Canvas上縮放并繪制圖片。

通常用到drawImage(image,x,y,width,height)。

參數image：image對象，要畫的圖片。

x,y:要畫的圖片是從canvas的哪個坐標點開始。

坐標通常是（0,0） 點，使用的也是第四象限的坐標系。

width,height:要畫的這張圖的寬度和高度是多少，通常不傳也可以，不傳的話圖片有多大畫多大。

傳入的話就是控制圖片的縮放。

七、 Image對象

drawImage第一個參數要傳入一Image對象，那什么是Image對象呢？

在手機上加載圖片，有一種方式，預加載圖片。預加載圖片就要用的Image對象了。我們通常看到的是Image標簽。

Image標簽就可以理解為Image對象。

Image對象的作用：預加載圖片和圖片按比例縮放。

例子：

當設置一個img對象的src的時候，實際上就是向網絡上發送一個請求，來請求這張圖片。

var img=new Image(); img.onload=function(){debugger } img.src='https://www.baidu.com/img/bdlogo.gif';

執行的時候進入了img的onload事件，說明請求發送成功了，同時圖片加載回來了，才會觸發Image對象的onload()方法。

可以看看Image標簽加載回來的圖片都有些什么屬性？

可以在控制臺debug的Watch中添加一個this。

通過這種方式加載出來的圖片，我們可以獲得它的高度，寬度。以及它的自然的寬度和自然的高度。

有了這些信息，可以根據圖片大小和當前設備的分辨率動態的調整圖片的大小。如果只使用傳統的Image標簽是沒辦法做到的。

八、css3動畫事件

點擊animation了解css3動畫知識。

為什么要有動畫事件？當一個動畫結束后，我想執行一個操作時怎么辦？怎么用js做邏輯控制？此時必須用css3的動畫事件。

當一個動畫結束的時候，我們可以監聽一個元素的animationEnd事件來實現。

webkit瀏覽器需要加webkit前綴。

做動畫時， css3動畫框架可以用animate.css。

引用animate.css，在動畫元素上加class animate rotateIn。

?

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/4904929.html有問題歡迎與我討論，共同進步。

總結

以上是生活随笔為你收集整理的移动端相册开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。