手機(jī)Wap網(wǎng)站的設(shè)計(jì)規(guī)范

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

1.1 XHTML部分

大多數(shù)手機(jī)不支持的：

* 表單元素的“disable”屬性

部分手機(jī)不支持的：

* “button”標(biāo)簽

* “input[type=file]“標(biāo)簽

* “iframe”標(biāo)簽。

雖然只有部分手機(jī)不支持這幾個(gè)標(biāo)簽，但因?yàn)檫@些標(biāo)簽在頁面中往往具有非常重要的功能，所以屬于高危標(biāo)簽，要謹(jǐn)慎使用。

少數(shù)手機(jī)不支持的：

* “select”標(biāo)簽：該標(biāo)簽如果被賦予比較復(fù)雜的CSS屬性，可能會(huì)導(dǎo)致顯示不正常，比如”vertical-align:middle”。

1.2 CSS部分

大部分手機(jī)不支持的：

* “font-family”屬性：因?yàn)槭謾C(jī)基本上只安裝了宋體這一種中文字體；

* “font-family:bold;”：對(duì)中文字符無效，但一般對(duì)英文字符是有效的；

* “font-style: italic;”：同上；

* “font-size”屬性：比如12px的中文和14px的中文看起來一樣大，當(dāng)字符大小為18px的時(shí)候你也許能看出來一些區(qū)別；

* “white-space/word-wrap”屬性：無法設(shè)置強(qiáng)制換行，所以當(dāng)你網(wǎng)頁有很多中文的時(shí)候，需要特別關(guān)注不要讓過多連寫的英文字符撐開頁面；

* “background-position”屬性：但背景圖片的其他屬性設(shè)定是支持的；

* “position”屬性；

* “overflow”屬性；

* “display”屬性；

* “min-height”和”min-weidth”屬性；

部分手機(jī)不支持的：

* “height”屬性：對(duì)”height”的支持不太好，奇怪的是在我們的測試當(dāng)中，僅僅只有很少部分手機(jī)不支持”width”屬性；

* “pading”屬性

* “margin”屬性：更高比例的手機(jī)不支持”margin”的負(fù)值。

少數(shù)手機(jī)不支持的：

* 少數(shù)手機(jī)對(duì)CSS完全不支持；

1.3 JAVASCRIPT部分

這部分測試相對(duì)不那么讓人抓狂，要么干脆不支持，如果支持的話，對(duì)基本的dom操作、事件等支持度都還不錯(cuò)。但我們沒有測試過很復(fù)雜的腳本。

在我們測試過的手機(jī)當(dāng)中，支持（包括不完全支持）JavaScript的手機(jī)比例大約在一半左右，當(dāng)然，對(duì)于我們來說，最重要的不是這個(gè)比例，而是要如何做好JavaScript的優(yōu)雅降級(jí)。

1.4 其他

部分手機(jī)不支持png8和png24，所以盡量使用jpg和gif的圖片

另外對(duì)于平滑的漸變等精細(xì)的圖片細(xì)節(jié)，部分手機(jī)的色彩支持度并不能達(dá)到要求，所以慎用有平滑漸變的bar設(shè)計(jì)

部分手機(jī)對(duì)于超大圖片，既不進(jìn)行縮放，也不顯示橫下滾動(dòng)條

少數(shù)手機(jī)在打開超過20k的測試頁面時(shí)，會(huì)顯示內(nèi)存不足

2. 開發(fā)中需要注意的問題

2.1 手機(jī)網(wǎng)頁編碼需要遵循什么規(guī)范？

遵循XHTML Mobile Profile規(guī)范（WAP-277-XHTMLMP-20011029-a.pdf），簡稱為XHTML MP，也就是通常說的WAP2.0規(guī)范。 XHTMLMP 是為不支持XHTML的全部特性且資源有限的客戶端所設(shè)計(jì)的。它以XHTML Basic為基礎(chǔ)，加入了一些來自XHTML 1.0的元素和屬性。這些內(nèi)容包括一些其他元素和對(duì)內(nèi)部樣式表的支持。和XHTML Basic相同，XHTML MP是嚴(yán)格的XHTML 1.0子集。

2.2 網(wǎng)頁文檔推薦使用擴(kuò)展名？

推薦命名為xhtml，按WAP2.0的規(guī)范標(biāo)準(zhǔn)寫成html/htm等也是可以的。但少數(shù)手機(jī)對(duì)html支持的不好。

2.3 為什么現(xiàn)今大多數(shù)的網(wǎng)站一行字?jǐn)?shù)上限為14個(gè)中文字符

由于手持設(shè)備的特殊性，其頁面中實(shí)際文字大小未必是我們在CSS中設(shè)定的文字大小，尤其是在第三方瀏覽器中。例如Nokia5310，其內(nèi)置瀏覽器頁面內(nèi)文字大小與CSS設(shè)定相符，但是第三方瀏覽器OperaMini與UCWEB頁面內(nèi)文字大小卻大于CSS設(shè)定。經(jīng)測試，其文本大概在16px左右。假如屏幕分辨率寬度為240px，去除外邊距，那么其一行顯示14個(gè)字以內(nèi)，是比較保險(xiǎn)（避免文本換行）的做法。

2.4 使用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)目開發(fā)當(dāng)中，不推薦使用WCSS特有的屬性。

2.5 避免空值屬性

如果屬性值為空，在web頁面中是完全沒有問題的，但是在大部分手機(jī)網(wǎng)頁上會(huì)報(bào)錯(cuò)。

2.6 網(wǎng)頁大小限制

建議低版本頁面不超過15k，高版本頁面不超過60k。

2.7 用手機(jī)模擬器和第三方手機(jī)瀏覽器的在線模擬器來測試頁面是不是靠譜？

有條件的話，我們當(dāng)然建議在手機(jī)實(shí)體上進(jìn)行測試，因?yàn)槟繕?biāo)客戶群的手機(jī)設(shè)備總是在不斷變化的，這些手機(jī)模擬器通常不能完全正確的模擬頁面在手機(jī)上的顯示情況，比如圖片色彩，頁面大小限制等就很難再模擬器上測試出來。當(dāng)然，一些第三方手機(jī)瀏覽器的在線模擬器還是可以進(jìn)行測試的，第三方瀏覽器相對(duì)來說受手機(jī)設(shè)備的影響較小。

* 部分手機(jī)不支持png8和png24，所以盡量使用jpg和gif的圖片

* 另外對(duì)于平滑的漸變等精細(xì)的圖片細(xì)節(jié)，部分手機(jī)的色彩支持度并不能達(dá)到要求，所以慎用有平滑漸變的bar設(shè)計(jì)

* 部分手機(jī)對(duì)于超大圖片，既不進(jìn)行縮放，也不顯示橫下滾動(dòng)條

* 少數(shù)手機(jī)在打開超過20k的測試頁面時(shí)，會(huì)顯示內(nèi)存不足

3. 頁面元素規(guī)范

3.1 頁面字符使用規(guī)范

頁面上所有的文字都應(yīng)使用中文簡體字，以下情況除外：

已經(jīng)為大家所接受、理解上不存在疑難或歧義的外文，如：OK，TAXI等。

專有名詞，如外國人的姓名、國外公司的名稱、商標(biāo)等，難以翻譯或翻譯后對(duì)

理解反而造成困難的外文。

專門的外文欄目，如：English Club。

其他經(jīng)中國電信認(rèn)可的英文字符。

慎用以下詞語：

退出（Exit），用戶會(huì)理解成退出瀏覽器。

主頁（Home），用戶會(huì)理解成是瀏覽器的主頁。

書簽（Bookmark），用戶會(huì)容易混淆為手機(jī)的書簽。

菜單（Menu），這個(gè)單詞由瀏覽器在軟按鍵有多個(gè)功能選項(xiàng)時(shí)自動(dòng)生成，不需要人為指定。

3.2 格式輸入規(guī)范

當(dāng)已激活輸入?yún)^(qū)域時(shí)，只需要有一個(gè)確認(rèn)鏈接，不需要提供其他功能。

對(duì)所有格式化輸入都必須表明輸入格式，如輸入期時(shí)可以表示為：MM/YYYY，但不要多于10個(gè)漢字。

對(duì)輸入的類型進(jìn)行強(qiáng)制匹配，如該輸入數(shù)字的地方，不能輸入字母。

應(yīng)通過設(shè)定輸入框的內(nèi)容類型，實(shí)現(xiàn)用戶輸入法的自動(dòng)切換，如需要求用戶輸入Email地址時(shí)，應(yīng)自動(dòng)切換為“英文”。

3.3 背景音樂規(guī)范

為了滿足用戶在不同場景中的需要， WAP 頁面背景音樂必須默認(rèn)關(guān)閉，頁面中應(yīng)該設(shè)置明顯的可以開啟或關(guān)閉背景音的操作方式。背景音樂的請(qǐng)求代碼應(yīng)該放在圖片的請(qǐng)求代碼的后面，以保證下載速度和用戶感受。

3.4 翻頁設(shè)計(jì)規(guī)范

內(nèi)容需要翻頁顯示的，必須提供下一頁及上一頁鏈接，且下一頁必須在上一頁的鏈接左側(cè)顯示；

凡內(nèi)容超過3 頁，必須提供“第幾頁/共幾頁”的文字提示。

3.5 重定向使用規(guī)范

WAP業(yè)務(wù)中的重定向最多僅允許連續(xù) 2次，即用戶訪問頁面 A，可被重定向一次到頁面B，然后被重定向第二次到頁面 C，不允許在頁面Ｃ設(shè)置第三次重定向。 返回鏈接應(yīng)避免指向重定向的頁面。

3.6 滾動(dòng)顯示規(guī)范

終端若支持跑馬燈效果，其標(biāo)題及內(nèi)容需滾動(dòng)顯示時(shí)，全部默認(rèn)向左勻速移動(dòng)，特殊需要，可采取其它方式

4. 出錯(cuò)頁面規(guī)范

所有出錯(cuò)頁面應(yīng)給出簡潔、友好的錯(cuò)誤原因說明或者提示信息，指導(dǎo)用戶進(jìn)行正確操作；每個(gè)出錯(cuò)頁面應(yīng)給出“返回上級(jí)”鏈接，恢復(fù)到用戶前次頁面。

5. 頁面鏈接規(guī)范

所有鏈接必須真實(shí)有效，不允許出現(xiàn)空鏈接或報(bào)錯(cuò)等現(xiàn)象發(fā)生。

標(biāo)題與鏈接實(shí)際指向的頁面內(nèi)容必須保持一致。

推薦鏈接規(guī)范：

只允許交叉推薦中國電信互聯(lián)星空 WAP 站內(nèi)的本SP業(yè)務(wù)；

所有的交叉推薦鏈接僅允許以文字形式展示；

所有的交叉推薦鏈接名稱必須以“精彩推薦：”為前綴；

所有的交叉推薦鏈接僅允許放置于頁腳“返回互聯(lián)星空首頁”下方。

6. 頁面效果規(guī)范

普通頁面的全部展現(xiàn)時(shí)間應(yīng)保證小于 4s，多圖形頁面的全部展現(xiàn)時(shí)間應(yīng)保證小于6s（包括頁面內(nèi)置對(duì)象）。

對(duì)于業(yè)務(wù)入口頁面，在保證速度的前提下，應(yīng)盡可能做得豐富一些，增強(qiáng)用戶的視覺感受；對(duì)于第二級(jí)和第三級(jí)及其以下的頁面，可以稍微簡化頁面的效果。

對(duì)于使用圖片的頁面，應(yīng)該設(shè)置與圖片主色調(diào)相近的背景色，在用戶觸發(fā)頁面

下載后，應(yīng)保證用戶通過迅速見到出現(xiàn)的背景色而能感受到下載已經(jīng)進(jìn)行，不能在下載進(jìn)行中向用戶展現(xiàn)白屏。

對(duì)于使用背景圖片的頁面不允許出現(xiàn)明顯的接縫痕跡。

頁面中的圖片未完全下載前，應(yīng)能夠用文字對(duì)其進(jìn)行說明。

頁面應(yīng)根據(jù)用戶瀏覽習(xí)慣顯示正常行距，不允許出現(xiàn)冗余空行。

7. 性能要求

WAP業(yè)務(wù)的技術(shù)性能指標(biāo)如下：

頁面平均響應(yīng)時(shí)間：在網(wǎng)絡(luò)正常傳輸情況下小于 3秒。

忙時(shí)連接成功率應(yīng)不小于 98%。

網(wǎng)絡(luò)時(shí)延（指從 WAP GW PING服務(wù)器的環(huán)回時(shí)延）應(yīng)不大于 100毫秒。

響應(yīng)時(shí)延（指從 WAP GW發(fā)出業(yè)務(wù)請(qǐng)求到WAP GW接收業(yè)務(wù)響應(yīng)的時(shí)延）應(yīng)不大于500毫秒。

頁面平均故障間隔時(shí)間（MTBF）：大于 10000小時(shí)。

頁面平均故障恢復(fù)時(shí)間：小于 5分鐘。

每秒處理的 WAP頁面請(qǐng)求數(shù)：大于 200次。

平臺(tái)應(yīng)用服務(wù)器響應(yīng)時(shí)間：在 2000 并發(fā)用戶（假設(shè)每個(gè)用戶每 10秒鐘發(fā)送一個(gè)請(qǐng)求）的前提下響應(yīng)時(shí)間為 1s。

數(shù)據(jù)庫服務(wù)器響應(yīng)時(shí)間：在所建庫的 100萬條記錄中查詢某條記錄的搜索平均時(shí)長小于0.5s。

藍(lán)暢信息技術(shù)有限公司成功為多家世界財(cái)富500強(qiáng)企業(yè)以及其他著名品牌提供優(yōu)質(zhì)服務(wù)，是您靠譜的互聯(lián)網(wǎng)開發(fā)供應(yīng)商。

服務(wù)客戶遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無錫、廈門、重慶、西安等大中型城市及地區(qū)    主要業(yè)務(wù)：H5開發(fā)，H5設(shè)計(jì)，H5外包，微信開發(fā)外包，H5商城開發(fā)，小程序商城開發(fā)，網(wǎng)站開發(fā)外包，H5游戲開發(fā)，小程序開發(fā)外包，小程序設(shè)計(jì)、APP開發(fā)外包，UI設(shè)計(jì)，視頻后期制作等