久久520免费视频-精品人妻一区二区三区四区蜜桃-天天射天天操天天射天天操-日本熟妇色综合-精品亚洲成a人7777在线观看-日韩人妻高清中文字幕-麻豆电影av激情实拍-中文字幕日韩不卡-日韩欧美中文字幕黄片

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

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

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

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

推薦參考資料

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

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