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

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

移動端經常使用類庫及優缺點

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 延遲