WAP网站设计规范

目录

WAP网站设计规范 (2)

1.手机浏览器兼容性测试结果概要（数据来自淘宝） (2)

1.1XHTML部分 (2)

1.2CSS部分 (2)

1.3JAVASCRIPT部分 (3)

1.4其他 (3)

2.开发中需要注意的问题 (3)

2.1手机网页编码需要遵循什么规范？ (3)

2.2网页文档推荐使用扩展名？ (4)

2.3为什么现今大多数的网站一行字数上限为14个中文字符？ (4)

2.4使用WCSS还是CSS？ (4)

2.5避免空值属性 (4)

2.6网页大小限制 (4)

2.7用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱？ (4)

3.页面元素规范 (5)

3.1页面字符使用规范 (5)

3.2格式输入规范 (5)

3.3背景音乐规范 (5)

3.4翻页设计规范 (6)

3.5重定向使用规范 (6)

3.6滚动显示规范 (6)

4.出错页面规范 (6)

5.页面链接规范 (6)

6.页面效果规范 (6)

7.性能要求 (7)

8.兼容表 (7)

WAP网站设计规范

1.1手机浏览器兼容性测试结果概要

XHTML部分

大多数手机不支持的：

* 表单元素的“disable”属性

部分手机不支持的：

* “button”标签

* “input[type=file]“标签

* “iframe”标签。

虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。

少数手机不支持的：

* “select”标签：该标签如果被赋予比较复杂的CSS属性，可能会导致显示不正常，比如”vertical-align:middle”。

1.2CSS部分

大部分手机不支持的：

* “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.3JAVASCRIPT部分

这部分测试相对不那么让人抓狂，要么干脆不支持，如果支持的话，对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。

在我们测试过的手机当中，支持（包括不完全支持）JavaScript的手机比例大约在一半左右，当然，对于我们来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级。

1.4其他

?部分手机不支持png8和png24，所以尽量使用jpg和gif的图片

?另外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所以慎用有平滑渐变的bar设计

?部分手机对于超大图片，既不进行缩放，也不显示横下滚动条

?少数手机在打开超过20k的测试页面时，会显示内存不足

1.开发中需要注意的问题

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的测试页面时，会显示内存不足

2.页面元素规范

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滚动显示规范

终端若支持跑马灯效果，其标题及内容需滚动显示时，全部默认向左匀速移动，特殊需要，可采取其它方式

3.出错页面规范

所有出错页面应给出简洁、友好的错误原因说明或者提示信息，指导用户进行正确操作；每个出错页面应给出“返回上级”链接，恢复到用户前次页面。

4.页面链接规范

●所有链接必须真实有效，不允许出现空链接或报错等现象发生。

●标题与链接实际指向的页面内容必须保持一致。

●推荐链接规范：

?只允许交叉推荐中国电信互联星空WAP 站内的本SP业务；

?所有的交叉推荐链接仅允许以文字形式展示；

?所有的交叉推荐链接名称必须以“精彩推荐：”为前缀；

?所有的交叉推荐链接仅允许放置于页脚“返回互联星空首页”下方。

5.页面效果规范

●普通页面的全部展现时间应保证小于4s，多图形页面的全部展现时间应保证小于6s（包

括页面内置对象）。

●对于业务入口页面，在保证速度的前提下，应尽可能做得丰富一些，增强用户的视觉感

受；对于第二级和第三级及其以下的页面，可以稍微简化页面的效果。

●对于使用图片的页面，应该设置与图片主色调相近的背景色，在用户触发页面

●的下载后，应保证用户通过迅速见到出现的背景色而能感受到下载已经进行，

●不能在下载进行中向用户展现白屏。

●对于使用背景图片的页面不允许出现明显的接缝痕迹。

●页面中的图片未完全下载前，应能够用文字对其进行说明。

●页面应根据用户浏览习惯显示正常行距，不允许出现冗余空行。

6.性能要求

WAP业务的技术性能指标如下：

●页面平均响应时间：在网络正常传输情况下小于3秒。

●忙时连接成功率应不小于98%。

●网络时延（指从WAP GW PING服务器的环回时延）应不大于100毫秒。

●响应时延（指从WAP GW发出业务请求到WAP GW接收业务响应的时延）

●应不大于500毫秒。

●页面平均故障间隔时间（MTBF）：大于10000小时。

●页面平均故障恢复时间：小于5分钟。

●每秒处理的WAP页面请求数：大于200次。

●平台应用服务器响应时间：在2000 并发用户（假设每个用户每10秒钟发送一个请求）

的前提下响应时间为1s。

●数据库服务器响应时间：在所建库的100万条记录中查询某条记录的搜索平均时长小

于0.5s。

7.兼容表

见附件Mobile compatibility tables.jpg