一、目前移動端布局方法
兩個基本規則：移動優先，設計初期就要考慮設計的頁面如何多終端顯示。漸進增強，充分發揮硬件設備的最大功能。
三個常用方法：
1）css3-media Query（最簡單，最基本）
優點：解決了跨設備問題
缺點：兼容性代碼多工作量大，加載速度慢
2）借助原生的js
優點：通過js控制頁面的樣式加載，通過js檢測設備的屬性， 很好的解決了兼容性問題。
缺點：書寫原生的js，成本比較高，不推薦使用。
3）第三方開源框架
能夠很好的兼容瀏覽器，提供各種插件和解決方案，方便敏捷開發。目前最好用的移動端html5框架，jquery mobile基於jquery框架；bootstrap屬於css框架，有很好的布局系統和豐富的插件；sencha touch是一個比較重的移動開發框架，不適合便捷開發。
二、技術選型
Bootstrap如今是Github上最火的開源項目之一，這是一個用於前端開發的工具包，由Twitter前設計師Mark Otto和Jacob Thornton合作開發。
12列柵格化布局系統，豐富的組件，是目前移動web開發比較火的框架之一。
三、設計規范
1. 簡化內容
一般的手機、平板電腦等移動裝置，不易容納下適合於個人電腦的龐大網頁資訊，因此手機移動網頁的首要重點，就是減少內容，不論是圖片、文字或是影音。
請記住一個重點：只要將最重要的資訊放入移動版網頁，就是最主要的准則，重要性較低的、讀取需要時間的內容，則可以透過超鏈接，連回到正常的官方網站。
移動網站必須十分的重視內容簡化這一點，一個塞滿內容的移動網站無法獲得網路客戶的青睞。
2. 一欄滑動的最佳策略
大部分的移動裝置，畫面都不如桌上電腦那么大，尤其是閱讀文字時更需要加以放大。即使智能手機都具有網頁放大縮小功能，但是觀看起來較為麻煩。
因此設計移動網頁時，建議是能夠以滑動屏幕方式閱讀網站，因為滑動網頁比起放大網頁觀看來得簡單多了。
3. 導覽功能大不同
手機網頁與跟一般的網頁不同的，在於當閱讀文章到最后時，要回到最前頭是麻煩的，因此設計網頁的企業，除了減少卷動畫面的機會外，也會加強導覽的功能，讓網頁變得更容易於移動裝置上閱讀。導覽設計的重點有：
1）只在首頁的部份加入搜尋的功能 2）建立導覽功能鍵，其中以「回到首頁」、「回到上一頁」這兩個最為重要 3）最后，「回到上一頁」的按鍵除了首頁以外，其余的頁面都需要放置
4. 減少文字輸入部分
目前手機大多沒有實體的鍵盤，因此輸入文字上會比起使用鍵盤麻煩得多。因此，減少使用者輸入文字的機會，例如：個人的帳號、密碼、搜尋內文、使用編輯器...等，都是移動網頁要盡力避免的。設計的重點如下：
1）允許移動上網使用者儲存輸入的帳號密碼資訊 2）輸入的區塊盡量加以放大 3）允許移動上網使用者，輸入簡易的密碼，例如PIN數字密碼
- 多種分辨率的手機網頁版本
上圖是天貓移動端測試的分辨率分級：
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。
四、兼容性規范
- 手機瀏覽器兼容性測試結果概要
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的測試頁面時，會顯示內存不足。
五、總結說明
1.技術選型：bootstrap
2.設計規范：水平垂直布局，盡量減少圖片的使用，涉及到輸入的地，局域盡量要大。注意各區域邊距的統一，字體大小，顏色的統一。
3.兼容性測試：響應式布局與響應式字體
4.性能優化：圖片sprite的使用，css，js文件的壓縮，優化加載速度。