移動端的項目已經做過好幾個了，在這裏做個簡單的知識小總結

移動端常用類庫及優缺點

1. jQuery Mobile 是 jQuery 發布的針對手機和平板設備、經過觸控優化的 Web 框架.它基於 jQuery,在不同移動設備平臺上
可提供統一的用戶界面.該框架基於漸近增強技術,並利用 HTML5 和 CSS3 特性.Query Mobile 繼承了 jQuery 的優勢,並且提供了豐
富的適合手機應用的 UI 組件.jQuery Mobile 還有很多的第三方擴展.

2. Zepto.js 是支持移動 WebKit 瀏覽器的 JavaScript 框架,具有與 jQuery 兼容的語法.相對於 jQuery Mobile 更加輕量級,大小為
2-5k 的庫,通過不錯的 API 處理絕大多數的基本工作.

3. Sencha Touch 做的 Web App 看起來更像 Native App,用戶界面組件和豐富的數據管理,全部基於最新的 HTML 5 和 CSS3 的WEB 標準,全面兼容 Android 和 iOS 設備.Sencha Touch 提供了超過 50 個組件.

4.GMU(Global Mobile UI)是百度前端通用組開發的移動端組件庫,具有代碼體積小、簡單、易用等特點,組件內部處理了很多移動端的 bug,覆蓋機型廣,能大大減少開發交互型組件的工作量,非常適合移動端網站項目. 該組件基於 zepto 的 mobile UI 組件庫, 提供 webapp、pad 端簡單易用的 UI 組件!

5. Frozen UI 是騰訊 ISUX 團隊(社交用戶體驗設計團隊)根據最新的手機 QQ 設計規範制作的移動端 Web 框架,包括 CSS 基礎樣式和組件、JavaScript 基礎組件和一些動畫效果庫.

6. Ionic提供了一個免費且開源的移動優化 HTML,CSS 和JS 組件庫,來構建高交互性應用.基於 Sass 構建和 AngularJS 優
化.Ionic 既是一個 CSS 框架也是一個 Javascript UI 庫.許多組件需要 Javascript 才能產生神奇的效果,盡管通常組件不需要編碼,通過框架擴展可以很容易地使用,比如我們的 AngularIonic 擴展.


7. Junior 為前端框架,用來構建基於 HTML5 的移動 Web 應用,外觀與行為跟本地應用相似.它采用針對移動性能優化的 CSS3轉換,支持旋轉燈箱效果,包含多樣的 Ratchet UI 組件.整個框架使用 Zepto(類似 jQuery 語法的輕量級移動設備 js 類庫),且整合了
backbone.js 的視圖和路由. Junior 十分易於使用,且提供詳細的文檔及案例,便於學習.

移動端最小觸控區域大小

IOS 上 44 * 44px
Android 上 48 * 48dp 可以給文字、圖標、按鈕等可操作元素擴展觸控區域, padding、line-height 等都是不錯的方式.

移動端的點擊事件的有延遲

click 有 300ms 延遲,為了實現 safari 的雙擊事件的設計,瀏覽器要知道你是不是要雙擊操作
解決 1:直接禁用縮放<meta name="viewport" content="width=device-width, user-scalable=no">
解決 2:使用 fastclick 庫
解決 3: 用 css 設置-ms-touch-action: none,那麽對應的元素在被點擊之後,瀏覽器不會啟動縮放操作,也就避免了這個
300ms 延遲

移動端-項目基礎總結------彭記（020）