[转发贴] .NET WAP开发-WAP2.0篇

WAP1.1时代是否结束这个不可下定论。但WAP2.0的大面积使用应该已经成熟。DianPing网的WAP站点也基本上迁移到WAP2.0
从构建WAP网站的过程来看,WAP2.0和WAP1.1并没有什么很大的区别。
可以这么说wap2.0其实就是xhtml的网站，而wap1.1是wml的网站。
相比WML受到的限制，WAP2.0网站可以直接在PC上显示。CSS的有限支持。大大丰富了网页在手机上的展示，提供了更丰富的用户体验。WAP 2.0 可以简单的概括为 XHTML MP + WAP CSS


什么是XHTML MP
简单的引用一段话

XHTML MP 是基于 XHTML Basic创造，并从XHTML的完整版本中增加了一些元素和属性。例如
<i>,<b>,<small>,<big>和<hr>。XHTML MP支持一个简单的CSS版本，即WCSS/WAP CSS。

也就是说我们在WAP2.0中可以使用那些标签呢？具体可以查看这个http://www.w3.org/TR/2008/REC-xhtml-basic-20080729/
大概列举一下

Structure Module
body, head, html, title
Text Module
abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span,
strong, var
Hypertext Module
a
List Module
dl, dt, dd, ol, ul, li
Forms Module
button, fieldset, form, input, label, legend, select, optgroup, option, textarea
Basic Tables Module
caption, table, td, th, tr
Image Module
img
Object Module
object, param
Presentation module
b, big, hr, i, small, sub, sup, tt
Metainformation Module
meta
Link Module
link
Base Module
base

眼花，其实常用的页面标签（根据目前国内的情况分析的）

• div-页面结构分块
• span-文本
• b-粗体(但这个标签一定要在CSS定义)
• br-换行
• a-链接
• img-图片
• hr-分割线
• input-表单相关标签

不推荐使用标签table，一是因为难于控制，二是设备解析兼容问题。
b加粗需要在CSS中做定义，因为不是所有的设备都能正确的解释b。
什么是WAP CSS
WAP CSS 是CSS2的子集+一些WAP特有的扩展
英文的定义也很多

• WCSS/WAP
• CSS/Wireless
• CSS/Wireless Profile CSS

但请大家一定记住这几个都是一样东西，但和W3C CSS Mobile Profile是不一样的。所以google搜索资料的时候特别注意。
可以定义元素的有color，font，background，border，margin，padding等属性，具体大家可以参考dianping的wap网站
值得注意的几个地方

• border-style属性值有很多，但只有none和solid被WAP浏览器广泛支持。
• 标签 <u> 在 XHTML MP 中是不存在的. 要想添加划线需要定义如下样式:
  .uline{text-decoration: underline}
• 标签<b> 不是所有浏览器支持（不定义也可以，将会被浏览器忽略），所以要重新定义一些b的样式
  b{font-weight:bold;}

CSS样式的位置问题
和web开发类似，在当前的文档style中定义，或是外部引用。但推荐在文档中定义，好处只有一个，避免兼容问题,不是所有设备都支持CSS的外部引用的。在实际开发中，通过.NET的母板页方式，其实也只要维护一个地方。
文档MIME 类型如何定义
下面三个 MIME 类型可用于 XHTML MP 文档:

• application/vnd.wap.xhtml+xml
• application/xhtml+xml
• text/html

开放移动联盟 (Open Mobile Alliance, OMA) 的推荐类型是"application/vnd.wap.xhtml+xml"
还有一种选择就是"application/xhtml+xml"，google使用了这个规则
如果使用"text/html" 有一个好处是你的 XHTML MP 页面Web 浏览器也可以正常显示。其他的类型，如果浏览器不知道，就会弹出提示框了。最佳的做法是动态选择 MIME 类型，这个可以通过Accept Header 做相应的判断，来动态改变。
XHTML MP 预格式化的文本
在 XHTML MP 中, 一个段落的前导和后缀空白符是不会被显示的. 因此, 一个段落中连续的两个或更多个空白字符在移动设备的屏幕上只会显示为一个空白字符. 要保留 XHTML MP 中文本的格式, 你就得用 <pre> 元素来进行处理。不过这个标签是否对所有设备支持，我保持怀疑。
img标签的使用
WAP2.0中支持的格式有 "image/gif", "image/jpg" 和 "image/png",
用法上和WEB中一样. 但尽量设置img 的高度和宽度，这样可以加快页面的渲染。
而且最好不要使用过多的图片，毕竟是手机网络，图片的加载效果太明显了。
XHTML MP 中的锚点链接
#号的跳转功能非常有用，也是我认为对用户来说最有效的体验。
它一般用在导航。先设置目标链接，通过id属性设置；再设置锚链接的URL为#id名称即可实现在同一个页面，导航的作用。这个大家可以看看sina.cn的彩版对其的运用是比较经典的做法。

<div><a id="top"></a></div>
......
<div><a href="#top">Back to top</a></div>

如何测试WAP网站是否符合Mobile标准
很简单，可以在http://validator.w3.org/mobile/检查你的站点是否适合Mobile浏览。也可以作为修正规范的一个工具，就是速度奇慢。