手機Wap網站的設計規范

1. 手機瀏覽器兼容性測試結果概要

1.1 XHTML部分

大多數手機不支持的：

* 表單元素的“disable”屬性

部分手機不支持的：

* “button”標簽

* “input[type=file]“標簽

* “iframe”標簽。

雖然只有部分手機不支持這幾個標簽，但因為這些標簽在頁面中往往具有非常重要的功能，所以屬于高危標簽，要謹慎使用。

少數手機不支持的：

* “select”標簽：該標簽如果被賦予比較復雜的CSS屬性，可能會導致顯示不正常，比如”vertical-align:middle”。

1.2 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完全不支持；

1.3 JAVASCRIPT部分

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

在我們測試過的手機當中，支持（包括不完全支持）JavaScript的手機比例大約在一半左右，當然，對于我們來說，最重要的不是這個比例，而是要如何做好JavaScript的優雅降級。

1.4 其他

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

另外對于平滑的漸變等精細的圖片細節，部分手機的色彩支持度并不能達到要求，所以慎用有平滑漸變的bar設計

部分手機對于超大圖片，既不進行縮放，也不顯示橫下滾動條

少數手機在打開超過20k的測試頁面時，會顯示內存不足

2. 開發中需要注意的問題

2.1 手機網頁編碼需要遵循什么規范？

遵循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子集。

2.2 網頁文檔推薦使用擴展名？

推薦命名為xhtml，按WAP2.0的規范標準寫成html/htm等也是可以的。但少數手機對html支持的不好。

2.3 為什么現今大多數的網站一行字數上限為14個中文字符

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

2.4 使用WCSS還是CSS？

WCSS (WAP Cascading Style Sheet 或稱 WAP CSS)是移動版本的CSS樣式表。它是CSS2的一個子集，去掉了一些不適于移動互聯網特性的屬性，并加入一些具有WAP特性的擴展（如-wap- input-format/-wap-input-required/display:-wap-marquee等）。需要留意的是，這些特殊的屬性擴展并不是很實用，所以在實際的項目開發當中，不推薦使用WCSS特有的屬性。

2.5 避免空值屬性

如果屬性值為空，在web頁面中是完全沒有問題的，但是在大部分手機網頁上會報錯。

2.6 網頁大小限制

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

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

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

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

* 另外對于平滑的漸變等精細的圖片細節，部分手機的色彩支持度并不能達到要求，所以慎用有平滑漸變的bar設計

* 部分手機對于超大圖片，既不進行縮放，也不顯示橫下滾動條

* 少數手機在打開超過20k的測試頁面時，會顯示內存不足

3. 頁面元素規范

3.1 頁面字符使用規范

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

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

專有名詞，如外國人的姓名、國外公司的名稱、商標等，難以翻譯或翻譯后對

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

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

其他經中國電信認可的英文字符。

慎用以下詞語：

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

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

書簽（Bookmark），用戶會容易混淆為手機的書簽。

菜單（Menu），這個單詞由瀏覽器在軟按鍵有多個功能選項時自動生成，不需要人為指定。

3.2 格式輸入規范

當已激活輸入區域時，只需要有一個確認鏈接，不需要提供其他功能。

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

對輸入的類型進行強制匹配，如該輸入數字的地方，不能輸入字母。

應通過設定輸入框的內容類型，實現用戶輸入法的自動切換，如需要求用戶輸入Email地址時，應自動切換為“英文”。

3.3 背景音樂規范

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

3.4 翻頁設計規范

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

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

3.5 重定向使用規范

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

3.6 滾動顯示規范

終端若支持跑馬燈效果，其標題及內容需滾動顯示時，全部默認向左勻速移動，特殊需要，可采取其它方式

4. 出錯頁面規范

所有出錯頁面應給出簡潔、友好的錯誤原因說明或者提示信息，指導用戶進行正確操作；每個出錯頁面應給出“返回上級”鏈接，恢復到用戶前次頁面。

5. 頁面鏈接規范

所有鏈接必須真實有效，不允許出現空鏈接或報錯等現象發生。

標題與鏈接實際指向的頁面內容必須保持一致。

推薦鏈接規范：

只允許交叉推薦中國電信互聯星空 WAP 站內的本SP業務；

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

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

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

6. 頁面效果規范

普通頁面的全部展現時間應保證小于 4s，多圖形頁面的全部展現時間應保證小于6s（包括頁面內置對象）。

對于業務入口頁面，在保證速度的前提下，應盡可能做得豐富一些，增強用戶的視覺感受；對于第二級和第三級及其以下的頁面，可以稍微簡化頁面的效果。

對于使用圖片的頁面，應該設置與圖片主色調相近的背景色，在用戶觸發頁面

下載后，應保證用戶通過迅速見到出現的背景色而能感受到下載已經進行，不能在下載進行中向用戶展現白屏。

對于使用背景圖片的頁面不允許出現明顯的接縫痕跡。

頁面中的圖片未完全下載前，應能夠用文字對其進行說明。

頁面應根據用戶瀏覽習慣顯示正常行距，不允許出現冗余空行。

7. 性能要求

WAP業務的技術性能指標如下：

頁面平均響應時間：在網絡正常傳輸情況下小于 3秒。

忙時連接成功率應不小于 98%。

網絡時延（指從 WAP GW PING服務器的環回時延）應不大于 100毫秒。

響應時延（指從 WAP GW發出業務請求到WAP GW接收業務響應的時延）應不大于500毫秒。

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

頁面平均故障恢復時間：小于 5分鐘。

每秒處理的 WAP頁面請求數：大于 200次。

平臺應用服務器響應時間：在 2000 并發用戶（假設每個用戶每 10秒鐘發送一個請求）的前提下響應時間為 1s。

數據庫服務器響應時間：在所建庫的 100萬條記錄中查詢某條記錄的搜索平均時長小于0.5s。

藍暢信息技術有限公司成功為多家世界財富500強企業以及其他著名品牌提供優質服務，是您靠譜的互聯網開發供應商。

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