1、導讀：國內手機網站目前還算是個新鮮事物，相應的手機網站前端開發也并不是特別成熟，對于一個網頁設計師來說要做一個手機網站還是會碰到許多問題，本文轉載自淘寶 UED，分享如何開發進行手機網站的前端卡發。從09年初接手淘寶手機網站前端開發的工作至今，轉眼已是一年。一步步看著手機淘寶從最初的beta版本到今天的樣子，感慨良多。手機網站開發，有著許多不為人知的困難：一是可參考的資料太少，大部分手機網站都處于起步階段，很多的時候都是摸著石頭過河，而鑒于淘寶自身的特殊性，也使得我們在參考成功案例之余，要做更多的思考；二是兼容性工作異常艱辛，難度一點也不比web網站的兼容性工作來的低（關于這點，請參見我之前的

2、文章）；再者作為一個手機網站的前端開發，也往往容易被人忽視（包括我們自己），大家也許會覺得做好一個手機網站能有多難，了解一點XHTML、一點 CSS，甚至不需要對JavaScript有什么研究，事實卻不是如此，正因為手機網站的開發受到設備的太多限制，前端們常常為了節約幾個字節而糾結萬 分，寫出語義化良好的代碼也顯得更加重要，而多版本的開發需求也對于JavaScript的優雅降級要求甚高，這樣才能使得網站有分版本需求的時候可以公 用同一套XHTML代碼，最大程度的降低開發成本。對于手機網站來說，相信現在僅僅只是個開始，隨著各種新機型的相繼面世，這塊領域必將成為兵家必爭的新高地。注意：由于手機網站

3、發展迅速，請參閱者注意本篇文章的發布時間。目錄1. 手機用戶設備統計分析 2. 手機瀏覽器兼容性測試結果概要 3. 手機網站開發中你需要注意的問題 4. 推薦參考資料 5. 總結 手機用戶設備統計分析擁有全面的用戶數據，無疑能幫助我們做出更符合用戶需求的產品。內部數據能幫我們精確了解我們的目標用戶群的特征；而外部數據能告訴我們大環境下的手機用戶狀況，并且能在內部數據不夠充分的時候給予我們一些非常有用的信息。從外部數據來看，09年10月到11月期間國內瀏覽器品牌市場占有率前三甲為：· Nokia(78%) · Opera(OEM) (10%) · iPho

4、ne(Safari) (3%) 國內的手機操作系統前三甲為：· Nokia SymbianOS(80%) · iPhoneOS(6%) · SonyEricsson(5%) 當然，作為中國的手機網站開發者，不能忽視強大的山寨機市場（或者應該叫作做國貨精品手機市場？）。順便提一下，這類手機通常使用的是MTK操作系統。（以上數據均來自）手機瀏覽器兼容性測試結果概要注意：以下所說的“大多數”是指在我們測試過的機型中，發生此類狀況的手機占比達50%及以上，“部分”為20%到50%；“少數”為20%及以下。而這個概率也僅僅只限于我們所測試過的機型，雖然我們采集的樣本盡量覆蓋

5、各種特征的手機，但并不代表所有手機的情況。XHTML部分大多數手機不支持的：· 表單元素的“disable”屬性 部分手機不支持的：· “button”標簽 · “inputtype=file“標簽 · “iframe”標簽。 雖然只有部分手機不支持這幾個標簽，但因為這些標簽在頁面中往往具有非常重要的功能，所以屬于高危標簽，要謹慎使用。少數手機不支持的：· “select”標簽：該標簽如果被賦予比較復雜的CSS屬性，可能會導致顯示不正常，比如”vertical-align:middle”。 CSS部分大部分手機不支持的：· “font

6、-family”屬性：因為手機基本上只安裝了宋體這一種中文字體； · “font-family:bold;”：對中文字符無效，但一般對英文字符是有效的； · “font-style: italic;”：同上； · “font-size”屬性：比如12px的中文和14px的中文看起來一樣大，當字符大小為18px的時候你也許能看出來一些區別； · “white-space/word-wrap”屬性：無法設置強制換行，所以當你網頁有很多中文的時候，需要特別關注不要讓過多連寫的英文字符撐開頁面； · “background-position”屬性：但背

7、景圖片的其他屬性設定是支持的； · “position”屬性； · “overflow”屬性； · “display”屬性； · “min-height”和”min-weidth”屬性； 部分手機不支持的：· “height”屬性：對”height”的支持不太好，奇怪的是在我們的測試當中，僅僅只有很少部分手機不支持”width”屬性； · “pading”屬性 · “margin”屬性：更高比例的手機不支持”margin”的負值。 少數手機不支持的：· 少數手機對CSS完全不支持； JavaScript部分這部分測

8、試相對不那么讓人抓狂，要么干脆不支持，如果支持的話，對基本的dom操作、事件等支持度都還不錯。但我們沒有測試過很復雜的腳本。在我們測試過的手機當中，支持（包括不完全支持）JavaScript的手機比例大約在一半左右，當然，對于我們來說，最重要的不是這個比例，而是要如何做好JavaScript的優雅降級。其他· 部分手機不支持png8和png24，所以盡量使用jpg和gif的圖片 · 另外對于平滑的漸變等精細的圖片細節，部分手機的色彩支持度并不能達到要求，所以慎用有平滑漸變的bar設計 · 部分手機對于超大圖片，既不進行縮放，也不顯示橫下滾動條 · 少數手

9、機在打開超過20k的測試頁面時，會顯示內存不足 開發中你需要注意的問題· 手機網頁編碼需要遵循什么規范？遵循XHTML Mobile Profile規范（），簡稱為XHTML MP，也就是通常說的規范。 XHTMLMP 是為不支持XHTML的全部特性且資源有限的客戶端所設計的。它以XHTML Basic為基礎，加入了一些來自XHTML 1.0的元素和屬性。這些內容包括一些其他元素和對內部樣式表的支持。和XHTML Basic相同，XHTML MP是嚴格的XHTML 1.0子集。 · 網頁文檔推薦使用擴展名？推薦命名為xhtml，按的規范標準寫成html/htm等也

10、是可以的。但少數手機對html支持的不好。 · 為什么現今大多數的網站一行字數上限為14個中文字符？由于手持設備的特殊性，其頁面中實際 文字大小未必是我們在CSS中設定的文字大小，尤其是在第三方瀏覽器中。例如Nokia5310，其內置瀏覽器 頁面內文字大小與CSS設定相符，但是第三方瀏覽器OperaMini與UCWEB頁面內文字大小卻大于CSS設定。經測試，其文本大概在16px左右。 假如屏幕分辨率寬度為240px，去除外邊距，那么其一行顯示14個字以內，是比較保險（避免文本換行）的做法。 · 使用WCSS還是CSS？WCSS ( Style Sheet 或稱 )是移動版本的CSS樣式表。它是CSS2的一個子集，去掉了一些不適于移動互聯網特性的屬性，并加入一些具有WAP特性的擴展（如-wap- input-format/-等）。 需要留意的是，這些特殊的屬性擴展并不是很實用，所以在實際的項目開發當中，不推薦使用WCSS特有的屬性。 · 避免空值屬性如果屬性值為空，在web頁面中是完全沒有問題的，但是在大部分手機網頁上會報錯。 · 網頁大小限制建議低版本頁面不超過15k，高版本頁面不超過60k。 · 用手機模擬器和第三方手機瀏覽器的在線模擬器來測試頁面是不是