（轉）手機網站前端開發經驗總結

時間 2019-11-08

原文原文鏈接

導讀：國內手機網站目前還算是個新鮮事物，相應的手機網站前端開發也並非特別成熟，對於一個網頁設計師來講要作一個手機網站仍是會碰到許多問題，本文轉載自淘寶 UED，分享如何開發進行手機網站的前端卡發。css

從09年初接手淘寶手機網站前端開發的工做至今，轉眼已經是一年。一步步看着手機淘寶從最初的beta版本到今天的樣子，感慨良多。html

手機網站開發，有着許多鮮爲人知的困難：前端

一是可參考的資料太少，大部分手機網站都處於起步階段，不少的時候都是摸着石頭過河，而鑑於淘寶自身的特殊性，也使得咱們在參考成功案例之餘，要作更多的思考；web

二是兼容性工做異常艱辛，難度一點也不比web網站的兼容性工做來的低（關於這點，請參見我以前的文章）；瀏覽器

再者做爲一個手機網站的前端開發，也每每容易被人忽視（包括咱們本身），你們也許會以爲作好一個手機網站能有多難，瞭解一點XHTML、一點CSS，甚至不須要對JavaScript有什麼研究，事實卻不是如此，正由於手機網站的開發受到設備的太多限制，前端們經常爲了節約幾個字節而糾結萬分，寫出語義化良好的代碼也顯得更加劇要，而多版本的開發需求也對於JavaScript的優雅降級要求甚高，這樣才能使得網站有分版本需求的時候能夠公用同一套 XHTML代碼，最大程度的下降開發成本。dom

對於手機網站來講，相信如今僅僅只是個開始，隨着各類新機型的相繼面世，這塊領域必將成爲兵家必爭的新高地。測試

注意：因爲手機網站發展迅速，請參閱者注意本篇文章的發佈時間。字體

目錄網站

手機用戶設備統計分析
手機瀏覽器兼容性測試結果概要
手機網站開發中你須要注意的問題
推薦參考資料
總結

手機用戶設備統計分析ui

擁有全面的用戶數據，無疑能幫助咱們作出更符合用戶需求的產品。內部數據能幫咱們精確瞭解咱們的目標用戶羣的特徵；而外部數據能告訴咱們大環境下的手機用戶情況，而且能在內部數據不夠充分的時候給予咱們一些很是有用的信息。

從外部數據來看，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。
用手機模擬器和第三方手機瀏覽器的在線模擬器來測試頁面是否是靠譜？ 有條件的話，咱們固然建議在手機實體上進行測試，由於目標客戶羣的手機設備老是在不斷變化的，這些手機模擬器一般不能徹底正確的模擬頁面在手機上的顯示情況，好比圖片色彩，頁面大小限制等就很難再模擬器上測試出來。固然，一些第三方手機瀏覽器的在線模擬器仍是能夠進行測試的，第三方瀏覽器相對來講受手機設備的影響較小。