手機(jī)網(wǎng)站建設(shè)是一個復(fù)雜而細(xì)致的過程，一定要按照先大后小、先簡單后復(fù)雜來進(jìn)行制作。所謂先大后小，就是說在制作網(wǎng)頁時，先把大的結(jié)構(gòu)設(shè)計好，然后再逐步完善小的結(jié)構(gòu)設(shè)計。所謂先簡單后復(fù)雜，就是先設(shè)計出簡單的內(nèi)容，然后再設(shè)計復(fù)雜的內(nèi)容，以便出現(xiàn)問題時好修改。 

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

手機(jī)瀏覽器兼容性測試結(jié)果概要

手機(jī)網(wǎng)站開發(fā)中你需要注意的問題

推薦參考資料

總結(jié)
手機(jī)用戶設(shè)備統(tǒng)計分析擁有全面的用戶數(shù)據(jù)，無疑能幫助我們做出更符合用戶需求的產(chǎn)品。內(nèi)部數(shù)據(jù)能幫我們精確了解我們的目標(biāo)用戶群的特征；而外部數(shù)據(jù)能告訴我們大環(huán)境下的手機(jī)用戶狀況，并且能在內(nèi)部數(shù)據(jù)不夠充分的時候給予我們一些非常有用的信息。從外部數(shù)據(jù)來看，09年10月到11月期間國內(nèi)瀏覽器品牌市場占有率前三甲為：
Nokia(78%)
Opera(OEM) (10%)
iPhone(Safari) (3%)
國內(nèi)的手機(jī)操作系統(tǒng)前三甲為：
Nokia SymbianOS(80%)
iPhoneOS(6%)
SonyEricsson(5%)
當(dāng)然，作為中國的手機(jī)網(wǎng)站開發(fā)者，不能忽視強(qiáng)大的山寨機(jī)市場（或者應(yīng)該叫作做國貨精品手機(jī)市場？）。順便提一下，這類手機(jī)通常使用的是MTK操作系統(tǒng)。（以上數(shù)據(jù)均來自statcounter.com）手機(jī)瀏覽器兼容性測試結(jié)果概要注意：以下所說的“大多數(shù)”是指在我們測試過的機(jī)型中，發(fā)生此類狀況的手機(jī)占比達(dá)50%及以上，“部分”為20%到50%；“少數(shù)”為20%及以下。而這個概率也僅僅只限于我們所測試過的機(jī)型，雖然我們采集的樣本盡量覆蓋各種特征的手機(jī)，但并不代表所有手機(jī)的情況。XHTML部分大多數(shù)手機(jī)不支持的：
表單元素的“disable”屬性
部分手機(jī)不支持的：
“button”標(biāo)簽
“input[type=file]“標(biāo)簽
“iframe”標(biāo)簽。
雖然只有部分手機(jī)不支持這幾個標(biāo)簽，但因為這些標(biāo)簽在頁面中往往具有非常重要的功能，所以屬于高危標(biāo)簽，要謹(jǐn)慎使用。少數(shù)手機(jī)不支持的：
“select”標(biāo)簽：該標(biāo)簽如果被賦予比較復(fù)雜的CSS屬性，可能會導(dǎo)致顯示不正常，比如”vertical-align:middle”。
CSS部分大部分手機(jī)不支持的：
“font-family”屬性：因為手機(jī)基本上只安裝了宋體這一種中文字體；
“font-family:bold;”：對中文字符無效，但一般對英文字符是有效的；
“font-style: italic;”：同上；
“font-size”屬性：比如12px的中文和14px的中文看起來一樣大，當(dāng)字符大小為18px的時候你也許能看出來一些區(qū)別；
“white-space/word-wrap”屬性：無法設(shè)置強(qiáng)制換行，所以當(dāng)你網(wǎng)頁有很多中文的時候，需要特別關(guān)注不要讓過多連寫的英文字符撐開頁面；
“background-position”屬性：但背景圖片的其他屬性設(shè)定是支持的；
“position”屬性；
“overflow”屬性；
“display”屬性；
“min-height”和”min-weidth”屬性；
部分手機(jī)不支持的：
“height”屬性：對”height”的支持不太好，奇怪的是在我們的測試當(dāng)中，僅僅只有很少部分手機(jī)不支持”width”屬性；
“pading”屬性
“margin”屬性：更高比例的手機(jī)不支持”margin”的負(fù)值。
少數(shù)手機(jī)不支持的：
少數(shù)手機(jī)對CSS完全不支持；
JavaScript部分這部分測試相對不那么讓人抓狂，要么干脆不支持，如果支持的話，對基本的dom操作、事件等支持度都還不錯。但我們沒有測試過很復(fù)雜的腳本。在我們測試過的手機(jī)當(dāng)中，支持（包括不完全支持）JavaScript的手機(jī)比例大約在一半左右，當(dāng)然，對于我們來說，最重要的不是這個比例，而是要如何做好JavaScript的優(yōu)雅降級。其他
部分手機(jī)不支持png8和png24，所以盡量使用jpg和gif的圖片
另外對于平滑的漸變等精細(xì)的圖片細(xì)節(jié)，部分手機(jī)的色彩支持度并不能達(dá)到要求，所以慎用有平滑漸變的bar設(shè)計
部分手機(jī)對于超大圖片，既不進(jìn)行縮放，也不顯示橫下滾動條
少數(shù)手機(jī)在打開超過20k的測試頁面時，會顯示內(nèi)存不足
開發(fā)中你需要注意的問題
手機(jī)網(wǎng)頁編碼需要遵循什么規(guī)范？
遵循XHTML Mobile Profile規(guī)范（WAP-277-XHTMLMP-20011029-a.pdf），簡稱為XHTML MP，也就是通常說的WAP2.0規(guī)范。 XHTMLMP是為不支持XHTML的全部特性且資源有限的客戶端所設(shè)計的。它以XHTML Basic為基礎(chǔ)，加入了一些來自XHTML 1.0的元素和屬性。這些內(nèi)容包括一些其他元素和對內(nèi)部樣式表的支持。和XHTML Basic相同，XHTML MP是嚴(yán)格的XHTML 1.0子集。
網(wǎng)頁文檔推薦使用擴(kuò)展名？
推薦命名為xhtml，按WAP2.0的規(guī)范標(biāo)準(zhǔn)寫成htmlm等也是可以的。但少數(shù)手機(jī)對html支持的不好。
為什么現(xiàn)今大多數(shù)的網(wǎng)站一行字?jǐn)?shù)上限為14個中文字符？
由于手持設(shè)備的特殊性，其頁面中實際文字大小未必是我們在CSS中設(shè)定的文字大小，尤其是在第三方瀏覽器中。例如Nokia5310，其內(nèi)置瀏覽器 頁面內(nèi)文字大小與CSS設(shè)定相符，但是第三方瀏覽器OperaMini與UCWEB頁面內(nèi)文字大小卻大于CSS設(shè)定。經(jīng)測試，其文本大概在16px左右。 假如屏幕分辨率寬度為240px，去除外邊距，那么其一行顯示14個字以內(nèi)，是比較保險（避免文本換行）的做法。
使用WCSS還是CSS？
WCSS (WAP Cascading Style Sheet 或稱 WAP CSS)是移動版本的CSS樣式表。它是CSS2的一個子集，去掉了一些不適于移動互聯(lián)網(wǎng)特性的屬性，并加入一些具有WAP特性的擴(kuò)展（如-wap-input-format/-wap-input-required/display:-wap-marquee等）。 需要留意的是，這些特殊的屬性擴(kuò)展并不是很實用，所以在實際的項目開發(fā)當(dāng)中，不推薦使用WCSS特有的屬性。
避免空值屬性
如果屬性值為空，在web頁面中是完全沒有問題的，但是在大部分手機(jī)網(wǎng)頁上會報錯。
網(wǎng)頁大小限制
建議低版本頁面不超過15k，高版本頁面不超過60k。
用手機(jī)模擬器和第三方手機(jī)瀏覽器的在線模擬器來測試頁面是不是靠譜？
有條件的話，我們當(dāng)然建議在手機(jī)實體上進(jìn)行測試，因為目標(biāo)客戶群的手機(jī)設(shè)備總是在不斷變化的，這些手機(jī)模擬器通常不能完全正確的模擬頁面在手機(jī)上的顯示情況，比如圖片色彩，頁面大小限制等就很難再模擬器上測試出來。當(dāng)然，一些第三方手機(jī)瀏覽器的在線模擬器還是可以進(jìn)行測試的，第三方瀏覽器相對來說受手機(jī)設(shè)備的影響較小。
推薦參考資料開發(fā)權(quán)威網(wǎng)站
WAPForum：XHTML Mobile Profile規(guī)范.pdf
WAPForum：WCSS規(guī)范.pdf
W3C：XHTML Basic 1.1規(guī)范.html
W3C：Mobile Web Test Suites Working Group.html
PPK：關(guān)于手機(jī)瀏覽器兼容性的測試和研究.html
Developershome：XHTML MP 教程.html （漢化版）
經(jīng)典開發(fā)文章
Unknown：移動WAP相關(guān)標(biāo)記語言的演進(jìn).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
手機(jī)型號查詢
handsetdetection：手機(jī)查詢.html 機(jī)型很全，偏國外機(jī)型，參數(shù)較多
mobile9：手機(jī)查詢.html 機(jī)型較全，偏門機(jī)型可能無內(nèi)容
試手機(jī)網(wǎng)：手機(jī)查詢+模擬.html 機(jī)型稍少，可以模擬手機(jī)操作
總結(jié)目前來說，手機(jī)網(wǎng)站開發(fā)是個典型的設(shè)備驅(qū)動開發(fā)的過程，頁面被設(shè)計成什么樣，能做到怎么樣，幾乎全取決于目標(biāo)客戶的手機(jī)設(shè)備情況。所以，對手機(jī)設(shè)備的了解，對于設(shè)計開發(fā)過程有著直觀重要的作用，對于前端來說，就需要有計劃的進(jìn)行長期的手機(jī)瀏覽器兼容性測試，什么樣的設(shè)計能被實現(xiàn)，什么樣的標(biāo)簽可以使用，這些都需要有數(shù)據(jù)的支持。我們必須有這樣的認(rèn)知，開發(fā)的手機(jī)網(wǎng)頁總是會在或多或少的手機(jī)設(shè)備上出現(xiàn)問題，因為我們永遠(yuǎn)無法知道所有用戶的手機(jī)設(shè)備情況，所以我們更要盡量的遵循標(biāo)準(zhǔn)進(jìn)行開發(fā)，這樣才能將滿足用戶的比例做到最好。任何一個領(lǐng)域都有值得你進(jìn)行深入了解的地方，即使現(xiàn)在看起來，手機(jī)網(wǎng)站的開發(fā)還有點不入主流，但我相信，隨著手機(jī)設(shè)備的更新?lián)Q代，總有一天它也會成為我們占領(lǐng)客戶的一個重要戰(zhàn)場，iphone這類有符合web標(biāo)準(zhǔn)的瀏覽器的手機(jī)發(fā)布，也給了我們更多的信心。 

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