大連藍普科技有限公司提供的網站制作、網站建設、虛擬空間、域名注冊、網站外包、網站托管、企業郵箱服務值得信賴!
服務熱線:0411-39750801
藍普首頁 網站建設 網站案例 域名注冊 虛擬空間 網站優化 我色我攝 騰訊企業郵 淘寶攝影 微信營銷 多媒體 關于我們
當前位置:首頁 >> 公司資訊
網站建設-藍普資訊
手機網站開發必修課

目錄

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

手機用戶設備統計分析

擁有全面的用戶數據,無疑能幫助我們做出更符合用戶需求的產品。內部數據能幫我們精確了解我們的目標用戶群的特征;而外部數據能告訴我們大環境下的手機用戶狀況,并且能在內部數據不夠充分的時候給予我們一些非常有用的信息。

從外部數據來看,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。
  • 用手機模擬器和第三方手機瀏覽器的在線模擬器來測試頁面是不是靠譜?
    有條件的話,我們當然建議在手機實體上進行測試,因為目標客戶群的手機設備總是在不斷變化的,這些手機模擬器通常不能完全正確的模擬頁面在手機上的顯示情況,比如圖片色彩,頁面大小限制等就很難再模擬器上測試出來。當然,一些第三方手機瀏覽器的在線模擬器還是可以進行測試的,第三方瀏覽器相對來說受手機設備的影響較小。

推薦參考資料

開發權威網站

經典開發文章

手機型號查詢

總結

目前來說,手機網站開發是個典型的設備驅動開發的過程,頁面被設計成什么樣,能做到怎么樣,幾乎全取決于目標客戶的手機設備情況。

所以,對手機設備的了解,對于設計開發過程有著直觀重要的作用,對于前端來說,就需要有計劃的進行長期的手機瀏覽器兼容性測試,什么樣的設計能被實現,什么樣的標簽可以使用,這些都需要有數據的支持。

我們必須有這樣的認知,開發的手機網頁總是會在或多或少的手機設備上出現問題,因為我們永遠無法知道所有用戶的手機設備情況,所以我們更要盡量的遵循標準進行開發,這樣才能將滿足用戶的比例做到最好。

任何一個領域都有值得你進行深入了解的地方,即使現在看起來,手機網站的開發還有點不入主流,但我相信,隨著手機設備的更新換代,總有一天它也會成為我們占領客戶的一個重要戰場,iphone這類有符合web標準的瀏覽器的手機發布,也給了我們更多的信心。

總之,革命尚未成功,同志仍需努力。

合乐分分彩一天多少期