移動端web開發框架

1、目前移動端佈局方法

兩個基本規則：移動優先，設計初期就要考慮設計的頁面如何多終端顯示。漸進加強，充分發揮硬件設備的最大功能。

三個經常使用方法：

   1）css3-media Query（最簡單，最基本）

     優勢：解決了跨設備問題

     缺點：兼容性代碼多工做量大，加載速度慢

   2）藉助原生的js

     優勢：經過js控制頁面的樣式加載，經過js檢測設備的屬性，  很好的解決了兼容性問題。

     缺點：書寫原生的js，成本比較高，不推薦使用。

   3）第三方開源框架

     可以很好的兼容瀏覽器，提供各類插件和解決方案，方便敏捷開發。目前最好用的移動端html5框架，jquery mobile基於jquery框架；bootstrap屬於css框架，有很好的佈局系統和豐富的插件；sencha touch是一個比較重的移動開發框架，不適合便捷開發。

 

2、技術選型

   Bootstrap現在是Github上最火的開源項目之一，這是一個用於前端開發的工具包，由Twitter前設計師Mark Otto和Jacob Thornton合做開發。

   12列柵格化佈局系統，豐富的組件，是目前移動web開發比較火的框架之一。

3、設計規範

1. 簡化內容

通常的手機、平板電腦等移動裝置，不易容納下適合於我的電腦的龐大網頁資訊，所以手機移動網頁的首要重點，就是減小內容，不管是圖片、文字或是影音。

請記住一個重點：只要將最重要的資訊放入移動版網頁，就是最主要的準則，重要性較低的、讀取須要時間的內容，則能夠透過超連接，連回到正常的官方網站。

移動網站必須十分的重視內容簡化這一點，一個塞滿內容的移動網站沒法得到網路客戶的青睞。

2. 一欄滑動的最佳策略

大部分的移動裝置，畫面都不如桌上電腦那麼大，尤爲是閱讀文字時更須要加以放大。即便智能手機都具備網頁放大縮小功能，可是觀看起來較爲麻煩。

所以設計移動網頁時，建議是可以以滑動屏幕方式閱讀網站，由於滑動網頁比起放大網頁觀看來得簡單多了。

3. 導覽功能大不一樣

手機網頁與跟通常的網頁不一樣的，在於當閱讀文章到最後時，要回到最前頭是麻煩的，所以設計網頁的企業，除了減小卷動畫面的機會外，也會增強導覽的功能，讓網頁變得更容易於移動裝置上閱讀。導覽設計的重點有：

1）只在首頁的部份加入搜尋的功能 2）創建導覽功能鍵，其中以「回到首頁」、「回到上一頁」這兩個最爲重要 3）最後，「回到上一頁」的按鍵除了首頁之外，其他的頁面都須要放置

4. 減小文字輸入部分

目前手機大多沒有實體的鍵盤，所以輸入文字上會比起使用鍵盤麻煩得多。所以，減小使用者輸入文字的機會，例如：我的的賬號、密碼、搜尋內文、使用編輯器...等，都是移動網頁要盡力避免的。設計的重點以下：

1）容許移動上網使用者儲存輸入的賬號密碼資訊 2）輸入的區塊儘可能加以放大 3）容許移動上網使用者，輸入簡易的密碼，例如PIN數字密碼

 

1. 多種分辨率的手機網頁版本

 

上圖是天貓移動端測試的分辨率分級：

A級表明必須兼容

B級次之

C級能夠不兼容

6. 觸控屏幕與非觸控屏幕設計

雖然今日觸碰型的智能手機當道，可是仍有爲數很多的傳統手機，沒有觸碰的界面，使用的是傳統的控制方向鍵作爲導覽的工具。例如：減小畫面中超連結的數量，可讓選擇連結的時候減小一些按鈕的動做，或是加大文字以減小誤擊的問題。

此外更重要的是鼠標的原理跟觸摸屏的原理有很大的差別，所以移動版的網頁應該避免只有電腦鼠標才能作到的功能，舉例來講：「下拉選單」的這一項功能，由於移動裝置沒有「鼠標座標」的設計，因此沒法觸發鼠標移動過去纔會顯示出來的選單。

7.性能要求     WAP業務的技術性能指標以下：

• 1）頁面平均響應時間：在網絡正常傳輸狀況下小於 3秒。
• 2）忙時鏈接成功率應不小於 98%。
• 3）網絡時延（指從 WAP GW PING服務器的環回時延）應不大於 100毫秒。
  • 4）響應時延（指從 WAP GW發出業務請求到WAP GW接收業務響應的時延              應不大於500毫秒。
• 5）頁面平均故障間隔時間（MTBF）：大於 10000小時。
• 6）頁面平均故障恢復時間：小於 5分鐘。
• 7）每秒處理的 WAP頁面請求數：大於 200次。
• 8）平臺應用服務器響應時間：在 2000 併發用戶（假設每一個用戶每 10秒鐘發送一個請求）的前提下響應時間爲 1s。
• 9）數據庫服務器響應時間：在所建庫的 100萬條記錄中查詢某條記錄的搜索平均時長小於0.5s。

4、兼容性規範

1. 手機瀏覽器兼容性測試結果概要

1.1 XHTML部分

大多數手機不支持的：

* 表單元素的「disable」屬性部分手機不支持的：

* 「button」標籤

* 「input[type=file]「標籤

* 「iframe」標籤。

雖然只有部分手機不支持這幾個標籤，但由於這些標籤在頁面中每每具備很是重要的功能，因此屬於高危標籤，要謹慎使用。

少數手機不支持的：

* 「select」標籤：該標籤若是被賦予比較複雜的CSS屬性，可能會致使顯示不正常，好比」vertical-align:middle」。

1.2 CSS部分

大部分手機不支持的：

* 「font-family」屬性：由於手機基本上只安裝了宋體這一種中文字體；

* 「font-family:bold;」：對中文字符無效，但通常對英文字符是有效的；

* 「font-style: italic;」：同上；

* 「font-size」屬性：好比12px的中文和14px的中文看起來同樣大，當字符大小爲18px的時候你也許能看出來一些區別；

* 「white-space/word-wrap」屬性：沒法設置強制換行，因此當你網頁有不少中文的時候，須要特別關注不要讓過多連寫的英文字符撐開頁面；

* 「background-position」屬性：但背景圖片的其餘屬性設定是支持的；

* 「position」屬性；

* 「overflow」屬性；

* 「display」屬性；

* 「min-height」和」min-weidth」屬性；

部分手機不支持的：

* 「height」屬性：對」height」的支持不太好，奇怪的是在咱們的測試當中，僅僅只有不多部分手機不支持」width」屬性；

* 「pading」屬性

* 「margin」屬性：更高比例的手機不支持」margin」的負值。

少數手機不支持的：

* 少數手機對CSS徹底不支持；

1.3 JAVASCRIPT部分

這部分測試相對不那麼讓人抓狂，要麼乾脆不支持，若是支持的話，對基本的dom操做、事件等支持度都還不錯。但沒有測試過很複雜的腳本。

在咱們測試過的手機當中，支持（包括不徹底支持）JavaScript的手機比例大約在一半左右，固然，對於咱們來講，最重要的不是這個比例，而是要如何作好JavaScript的優雅降級（jquery能夠更好的解決這一點）。

1.4 其餘

部分手機不支持png8和png24（如：htc，通常是系統未集成該功能，由於png圖片較大），因此儘可能使用jpg和gif的圖片（目前不多有手機不支持png）。

另外對於平滑的漸變等精細的圖片細節，部分手機的色彩支持度並不能達到要求，因此慎用有平滑漸變的bar設計。

部分手機對於超大圖片，既不進行縮放，也不顯示橫下滾動條。

少數手機在打開超過20k的測試頁面時，會顯示內存不足。

5、總結說明

1.技術選型：bootstrap

2.設計規範：水平垂直佈局，儘可能減小圖片的使用，涉及到輸入的地，局域儘可能要大。注意各區域邊距的統一，字體大小，顏色的統一。

3.兼容性測試：響應式佈局與響應式字體

4.性能優化：圖片sprite的使用，css，js文件的壓縮，優化加載速度。