開發一個移動端相冊

兼容性問題

1. android和ios的引擎都是webkit的內核
2. 手勢操做代替鼠標事件:mousedown,mouseup,click
3. 設備分辨率不一樣:pad,phone ,因此須要"響應式佈局"來適應不一樣的分辨率的機器
4. CSS3代替 DOM aination: DOM操做不少時候是在pc端爲了適應對ie等瀏覽器的兼容性來使用 CSS3在移動設備上不須要考慮兼容性,並且比dom操做來實現動畫效果更佳高效 CSS3直接用設備的GPU來渲染,更快

touch事件

1. touchstart 按下屏幕一瞬間出發
2. touchmove 按住屏幕滑動
3. touchend 手指離開屏幕
4. touchcancel(通常用不到) 觸摸操做被系統原生事件打斷:好比來電等.

zepto.js

zepto須要額外引入touch.js,它把touch事件封裝成了更易用易懂的tap事件 tap singleTap doubleTap longTap

swipe swipeLeft swipeRight swipeUp swipeDown

爲何使用touch事件而不是用click事件

• click 事件延時較長,據說有300ms
• touch 事件支持"多點觸摸"
• 手勢操做

優化技巧

• 對於圖片應用中,用canvas代替image標籤來展現. canvas會調用系統gpu加速來展現圖片,而image在顯示多張圖片時會很卡
• drawImage(image,x,y,width,height) 把一張圖片"畫"入canvas畫布中,參數(圖片源,canvas畫布上的位置(x,y),圖片的寬高(默認是圖片原來大小,傳入值能夠控制圖片的縮放))
• Image Object
  1. 預加載圖片 img標籤能夠理解爲一個Image Object的實例
  2. 圖片按比例縮放'

CSS3

• 兼容chrome safari opera @-webkit-keyframes 標準定義 @keyframes
• CSS3動畫事件 webkitAnimationEnd事件:監聽這個事件,當動畫執行結束時,採起一個function
• CSS3框架(偷懶神器,感謝做者以及分享着) animate.css的使用 1. link引入animate.css3 2. 把目標元素的設置class爲相似: class="animated shake" ,其中shake爲具體的動畫名稱 animate.css

寬高比例不一樣的圖片實現適應性縮放

$(window)獲取瀏覽器窗口對象
$(window).width()獲取窗口寬度

&&的意思

好比a()&&b()的意思是,若是a()返回ture,則表達式返回b()的返回值,若是a爲false,則返回false