手機(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)站都處于起步階段,很多的時候都是摸著石頭過河,而鑒于淘寶自身的特殊性,也使得我們在參考成功案例之余,要做更多的思考;二是兼容性工作異常艱辛,難度一點(diǎn)也不比web網(wǎng)站的兼容性工作來的低(關(guān)于這點(diǎn),請參見我之前的文章);再者作為一個手機(jī)網(wǎng)站的前端開發(fā),也往往容易被人忽視(包括我們自己),大家也許會覺得做好一個手機(jī)網(wǎng)站能有多難,了解一點(diǎn)XHTML、一點(diǎn)CSS,甚至不需要對JavaScript有什么研究,事實(shí)卻不是如此,正因?yàn)槭謾C(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)簽,但因?yàn)檫@些標(biāo)簽在頁面中往往具有非常重要的功能,所以屬于高危標(biāo)簽,要謹(jǐn)慎使用。少數(shù)手機(jī)不支持的:
“select”標(biāo)簽:該標(biāo)簽如果被賦予比較復(fù)雜的CSS屬性,可能會導(dǎo)致顯示不正常,比如”vertical-align:middle”。
CSS部分大部分手機(jī)不支持的:
“font-family”屬性:因?yàn)槭謾C(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è)備的特殊性,其頁面中實(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ò)展并不是很實(shí)用,所以在實(shí)際的項(xiàng)目開發(fā)當(dāng)中,不推薦使用WCSS特有的屬性。
避免空值屬性
如果屬性值為空,在web頁面中是完全沒有問題的,但是在大部分手機(jī)網(wǎng)頁上會報錯。
網(wǎng)頁大小限制
建議低版本頁面不超過15k,高版本頁面不超過60k。
用手機(jī)模擬器和第三方手機(jī)瀏覽器的在線模擬器來測試頁面是不是靠譜?
有條件的話,我們當(dāng)然建議在手機(jī)實(shí)體上進(jìn)行測試,因?yà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è)計能被實(shí)現(xiàn),什么樣的標(biāo)簽可以使用,這些都需要有數(shù)據(jù)的支持。我們必須有這樣的認(rèn)知,開發(fā)的手機(jī)網(wǎng)頁總是會在或多或少的手機(jī)設(shè)備上出現(xiàn)問題,因?yàn)槲覀冇肋h(yuǎn)無法知道所有用戶的手機(jī)設(shè)備情況,所以我們更要盡量的遵循標(biāo)準(zhǔn)進(jìn)行開發(fā),這樣才能將滿足用戶的比例做到最好。任何一個領(lǐng)域都有值得你進(jìn)行深入了解的地方,即使現(xiàn)在看起來,手機(jī)網(wǎng)站的開發(fā)還有點(diǎn)不入主流,但我相信,隨著手機(jī)設(shè)備的更新?lián)Q代,總有一天它也會成為我們占領(lǐng)客戶的一個重要戰(zhàn)場,iphone這類有符合web標(biāo)準(zhǔn)的瀏覽器的手機(jī)發(fā)布,也給了我們更多的信心。
隨著智能手機(jī)和智能設(shè)備的普及,從而影響了我們?nèi)粘5霓k公和生活設(shè)備,而不是單純的是pc端。智能手機(jī)和其他智能產(chǎn)品也成為了我們的移動終端。過去,我們讓網(wǎng)站適應(yīng)各種分辨率的唯一方法就是使用fluid page design(流體網(wǎng)頁設(shè)計),但是CSS媒體查詢具有更多的功能。通過使用CSS媒體查詢 你可以在小屏幕上隱藏側(cè)邊欄以展示更多的內(nèi)容,也可以在大屏幕上增大字體,這些都無法用fluid page design來實(shí)現(xiàn)。
|