蚌埠约友环保科技有限公司

 手機網站建設是一個復雜而細致的過程，一定要按照先大后小、先簡單后復雜來進行制作。所謂先大后小，就是說在制作網頁時，先把大的結構設計好，然后再逐步完善小的結構設計。所謂先簡單后復雜，就是先設計出簡單的內容，然后再設計復雜的內容，以便出現問題時好修改。 

 從09年初接手淘寶手機網站前端開發的工作至今，轉眼已是一年。一步步看著手機淘寶從最初的beta版本到今天的樣子，感慨良多。手機網站開發，有著許多不為人知的困難：一是可參考的資料太少，大部分手機網站都處于起步階段，很多的時候都是摸著石頭過河，而鑒于淘寶自身的特殊性，也使得我們在參考成功案例之余，要做更多的思考；二是兼容性工作異常艱辛，難度一點也不比web網站的兼容性工作來的低（關于這點，請參見我之前的文章）；再者作為一個手機網站的前端開發，也往往容易被人忽視（包括我們自己），大家也許會覺得做好一個手機網站能有多難，了解一點XHTML、一點CSS，甚至不需要對JavaScript有什么研究，事實卻不是如此，正因為手機網站的開發受到設備的太多限制，前端們常常為了節約幾個字節而糾結萬分，寫出語義化良好的代碼也顯得更加重要，而多版本的開發需求也對于JavaScript的優雅降級要求甚高，這樣才能使得網站有分版本需求的時候可以公用同一套XHTML代碼，最大程度的降低開發成本。對于手機網站來說，相信現在僅僅只是個開始，隨著各種新機型的相繼面世，這塊領域必將成為兵家必爭的新高地。注意：由于手機網站發展迅速，請參閱者注意本篇文章的發布時間。目錄
手機用戶設備統計分析

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

手機網站開發中你需要注意的問題

推薦參考資料

總結
手機用戶設備統計分析擁有全面的用戶數據，無疑能幫助我們做出更符合用戶需求的產品。內部數據能幫我們精確了解我們的目標用戶群的特征；而外部數據能告訴我們大環境下的手機用戶狀況，并且能在內部數據不夠充分的時候給予我們一些非常有用的信息。從外部數據來看，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的規范標準寫成htmlm等也是可以的。但少數手機對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。
用手機模擬器和第三方手機瀏覽器的在線模擬器來測試頁面是不是靠譜？
有條件的話，我們當然建議在手機實體上進行測試，因為目標客戶群的手機設備總是在不斷變化的，這些手機模擬器通常不能完全正確的模擬頁面在手機上的顯示情況，比如圖片色彩，頁面大小限制等就很難再模擬器上測試出來。當然，一些第三方手機瀏覽器的在線模擬器還是可以進行測試的，第三方瀏覽器相對來說受手機設備的影響較小。
推薦參考資料開發權威網站
WAPForum：XHTML Mobile Profile規范.pdf
WAPForum：WCSS規范.pdf
W3C：XHTML Basic 1.1規范.html
W3C：Mobile Web Test Suites Working Group.html
PPK：關于手機瀏覽器兼容性的測試和研究.html
Developershome：XHTML MP 教程.html （漢化版）
經典開發文章
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 機型稍少，可以模擬手機操作
總結目前來說，手機網站開發是個典型的設備驅動開發的過程，頁面被設計成什么樣，能做到怎么樣，幾乎全取決于目標客戶的手機設備情況。所以，對手機設備的了解，對于設計開發過程有著直觀重要的作用，對于前端來說，就需要有計劃的進行長期的手機瀏覽器兼容性測試，什么樣的設計能被實現，什么樣的標簽可以使用，這些都需要有數據的支持。我們必須有這樣的認知，開發的手機網頁總是會在或多或少的手機設備上出現問題，因為我們永遠無法知道所有用戶的手機設備情況，所以我們更要盡量的遵循標準進行開發，這樣才能將滿足用戶的比例做到最好。任何一個領域都有值得你進行深入了解的地方，即使現在看起來，手機網站的開發還有點不入主流，但我相信，隨著手機設備的更新換代，總有一天它也會成為我們占領客戶的一個重要戰場，iphone這類有符合web標準的瀏覽器的手機發布，也給了我們更多的信心。 

 隨著智能手機和智能設備的普及，從而影響了我們日常的辦公和生活設備，而不是單純的是pc端。智能手機和其他智能產品也成為了我們的移動終端。過去，我們讓網站適應各種分辨率的唯一方法就是使用fluid page design（流體網頁設計），但是CSS媒體查詢具有更多的功能。通過使用CSS媒體查詢 你可以在小屏幕上隱藏側邊欄以展示更多的內容，也可以在大屏幕上增大字體，這些都無法用fluid page design來實現。