本文引自淘寶前端技術博客：http://ued.taobao.com/
目錄
手機用戶設備統計分析
手機瀏覽器兼容性測試結果概要
手機網站開發中你需要注意的問題
推薦參考資料
總結
手機用戶設備統計分析
擁有全面的用戶數據，無疑能幫助我們做出更符合用戶需求的產品。內部數據能幫我們精確瞭解我們的目標用戶羣的特徵；而外部數據能告訴我們大環境下的手機用戶狀況，並且能在內部數據不夠充分的時候給予我們一些非常有用的信息。
從外部數據來看，09年10月到11月期間
國內瀏覽器品牌市場佔有率前三甲爲：
- Nokia(78%)
- Opera(OEM) (10%)
- iPhone(Safari) (3%)
- Nokia SymbianOS(80%)
- iPhoneOS(6%)
- SonyEricsson(5%)
當然，作爲中國的手機網站開發者，不能忽視強大的山寨機市場（或者應該叫作做國貨精品手機市場？）。順便提一下，這類手機通常使用的是MTK操作系統。
（以上數據均來自statcounter.com）
手機瀏覽器兼容性測試結果概要
注意：以下所說的“大多數”是指在我們測試過的機型中，發生此類狀況的手機佔比達50%及以上，“部分”爲20%到50%；“少數”爲20%及以下。而這個概率也僅僅只限於我們所測試過的機型，雖然我們採集的樣本儘量覆蓋各種特徵的手機，但並不代表所有手機的情況。
XHTML部分
大多數手機不支持的：
- 表單元素的“disable”屬性
部分手機不支持的：
少數手機不支持的：
- “button”標籤
- “input[type=file]“標籤
- “iframe”標籤。
少數手機不支持的：
- “select”標籤：該標籤如果被賦予比較複雜的CSS屬性，可能會導致顯示不正常，比如”vertical-align:middle”。
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完全不支持；
JavaScript部分
這部分測試相對不那麼讓人抓狂，要麼乾脆不支持，如果支持的話，對基本的dom操作、事件等支持度都還不錯。但我們沒有測試過很複雜的腳本。
在我們測試過的手機當中，支持（包括不完全支持）JavaScript的手機比例大約在一半左右，當然，對於我們來說，最重要的不是這個比例，而是要如何做好JavaScript的優雅降級。
其他
部分手機不支持png8和png24，所以儘量使用jpg和gif的圖片
另外對於平滑的漸變等精細的圖片細節，部分手機的色彩支持度並不能達到要求，所以慎用有平滑漸變的bar設計
部分手機對於超大圖片，既不進行縮放，也不顯示橫下滾動條
少數手機在打開超過20k的測試頁面時，會顯示內存不足
開發中你需要注意的問題
手機網頁編碼需要遵循什麼規範？
遵循XHTML Mobile Profile規範（WAP-277-XHTMLMP-20011029-a.pdf），簡稱爲XHTML MP，也就是通常說的WAP2.0規範。 XHTMLMP是爲不支持XHTML的全部特性且資源有限的客戶端所設計的。它以XHTML Basic爲基礎，加入了一些來自XHTML 1.0的元素和屬性。這些內容包括一些其他元素和對內部樣式表的支持。和XHTML Basic相同，XHTML MP是嚴格的XHTML 1.0子集。
網頁文檔推薦使用擴展名？
推薦命名爲xhtml，按WAP2.0的規範標準寫成html/htm等也是可以的。但少數手機對html支持的不好。
爲什麼現今大多數的網站一行字數上限爲14箇中文字符？
由於手持設備的特殊性，其頁面中實際文字大小未必是我們在CSS中設定的文字大小，尤其是在第三方瀏覽器中。例如Nokia5310，其內置瀏覽器 頁面內文字大小與CSS設定相符，但是第三方瀏覽器OperaMini與UCWEB頁面內文字大小卻大於CSS設定。經測試，其文本大概在16px左右。 假如屏幕分辨率寬度爲240px，去除外邊距，那麼其一行顯示14個字以內，是比較保險（避免文本換行）的做法。
使用WCSS還是CSS？
WCSS (WAP Cascading Style Sheet 或稱 WAP CSS)是移動版本的CSS樣式表。它是CSS2的一個子集，去掉了一些不適於移動互聯網特性的屬性，並加入一些具有WAP特性的擴展（如-wap-input-format/-wap-input-required/display:-wap-marquee等）。 需要留意的是，這些特殊的屬性擴展並不是很實用，所以在實際的項目開發當中，不推薦使用WCSS特有的屬性。
避免空值屬性
如果屬性值爲空，在web頁面中是完全沒有問題的，但是在大部分手機網頁上會報錯。
網頁大小限制
建議低版本頁面不超過15k，高版本頁面不超過60k。
用手機模擬器和第三方手機瀏覽器的在線模擬器來測試頁面是不是靠譜？
有條件的話，我們當然建議在手機實體上進行測試，因爲目標客戶羣的手機設備總是在不斷變化的，這些手機模擬器通常不能完全正確的模擬頁面在手機上的顯示情況，比如圖片色彩，頁面大小限制等就很難再模擬器上測試出來。當然，一些第三方手機瀏覽器的在線模擬器還是可以進行測試的，第三方瀏覽器相對來說受手機設備的影響較小。
推薦參考資料
開發權威網站
這部分測試相對不那麼讓人抓狂，要麼乾脆不支持，如果支持的話，對基本的dom操作、事件等支持度都還不錯。但我們沒有測試過很複雜的腳本。
在我們測試過的手機當中，支持（包括不完全支持）JavaScript的手機比例大約在一半左右，當然，對於我們來說，最重要的不是這個比例，而是要如何做好JavaScript的優雅降級。
其他
部分手機不支持png8和png24，所以儘量使用jpg和gif的圖片
另外對於平滑的漸變等精細的圖片細節，部分手機的色彩支持度並不能達到要求，所以慎用有平滑漸變的bar設計
部分手機對於超大圖片，既不進行縮放，也不顯示橫下滾動條
少數手機在打開超過20k的測試頁面時，會顯示內存不足
開發中你需要注意的問題
手機網頁編碼需要遵循什麼規範？
遵循XHTML Mobile Profile規範（WAP-277-XHTMLMP-20011029-a.pdf），簡稱爲XHTML MP，也就是通常說的WAP2.0規範。 XHTMLMP是爲不支持XHTML的全部特性且資源有限的客戶端所設計的。它以XHTML Basic爲基礎，加入了一些來自XHTML 1.0的元素和屬性。這些內容包括一些其他元素和對內部樣式表的支持。和XHTML Basic相同，XHTML MP是嚴格的XHTML 1.0子集。
網頁文檔推薦使用擴展名？
推薦命名爲xhtml，按WAP2.0的規範標準寫成html/htm等也是可以的。但少數手機對html支持的不好。
爲什麼現今大多數的網站一行字數上限爲14箇中文字符？
由於手持設備的特殊性，其頁面中實際文字大小未必是我們在CSS中設定的文字大小，尤其是在第三方瀏覽器中。例如Nokia5310，其內置瀏覽器 頁面內文字大小與CSS設定相符，但是第三方瀏覽器OperaMini與UCWEB頁面內文字大小卻大於CSS設定。經測試，其文本大概在16px左右。 假如屏幕分辨率寬度爲240px，去除外邊距，那麼其一行顯示14個字以內，是比較保險（避免文本換行）的做法。
使用WCSS還是CSS？
WCSS (WAP Cascading Style Sheet 或稱 WAP CSS)是移動版本的CSS樣式表。它是CSS2的一個子集，去掉了一些不適於移動互聯網特性的屬性，並加入一些具有WAP特性的擴展（如-wap-input-format/-wap-input-required/display:-wap-marquee等）。 需要留意的是，這些特殊的屬性擴展並不是很實用，所以在實際的項目開發當中，不推薦使用WCSS特有的屬性。
避免空值屬性
如果屬性值爲空，在web頁面中是完全沒有問題的，但是在大部分手機網頁上會報錯。
網頁大小限制
建議低版本頁面不超過15k，高版本頁面不超過60k。
用手機模擬器和第三方手機瀏覽器的在線模擬器來測試頁面是不是靠譜？
有條件的話，我們當然建議在手機實體上進行測試，因爲目標客戶羣的手機設備總是在不斷變化的，這些手機模擬器通常不能完全正確的模擬頁面在手機上的顯示情況，比如圖片色彩，頁面大小限制等就很難再模擬器上測試出來。當然，一些第三方手機瀏覽器的在線模擬器還是可以進行測試的，第三方瀏覽器相對來說受手機設備的影響較小。
推薦參考資料
開發權威網站
經典開發文章
- Unknown：移動WAP相關標記語言的演進.jpg
- Flora Graham：Alternative mobile browsers tested.html
- Lucas Pettinati(Yahoo)：Challenges of Interface Design for Mobile Devices.html
- Holly Kolman：How to Make a Click to Call Link.html
- Brian Suda：Introduction to the Mobile Web.html
手機型號查詢
總結
目前來說，手機網站開發是個典型的設備驅動開發的過程，頁面被設計成什麼樣，能做到怎麼樣，幾乎全取決於目標客戶的手機設備情況。
所以，對手機設備的瞭解，對於設計開發過程有着直觀重要的作用，對於前端來說，就需要有計劃的進行長期的手機瀏覽器兼容性測試，什麼樣的設計能被實現，什麼樣的標籤可以使用，這些都需要有數據的支持。
- handsetdetection：手機查詢.html 機型很全，偏國外機型，參數較多
- mobile9：手機查詢.html 機型較全，偏門機型可能無內容
- 試手機網：手機查詢+模擬.html 機型稍少，可以模擬手機操作
總結
目前來說，手機網站開發是個典型的設備驅動開發的過程，頁面被設計成什麼樣，能做到怎麼樣，幾乎全取決於目標客戶的手機設備情況。
所以，對手機設備的瞭解，對於設計開發過程有着直觀重要的作用，對於前端來說，就需要有計劃的進行長期的手機瀏覽器兼容性測試，什麼樣的設計能被實現，什麼樣的標籤可以使用，這些都需要有數據的支持。
