多终端研究[WAP相关研究]

Home
About

多终端研究[WAP相关研究]

July 10th, 2009 | Tags: Mobile, WAP, WCSS, web标准, 多终端, 浏览器

这次是针对多终端的第2次研究主题，主要是关于WAP相关知识的一些分享，也许可以给大家提供一些指引，给大家的研究带来一些帮助，更多的是互相学习，将自己这段时间的研究成功跟大家做个分享。
根据一些数据说明，目前使用手机上网的用户数占有很大一个比例，而且一直在呈稳步增长：

2008年网民上网设备调查

WAP相关介绍

XHTML MP是一种专门为手机和计算能力有限的设备设计的一个超文本计算机语言标准，是由Open Mobile Alliance定义的。它是WAP2.0说明中指定的官方标记语言。WAP Forum 是基于 XHTML Basic标记语言创造的，并从XHTML的完整版本中增加了一些元素和属性。XHTML MP支持一个简单的CSS版本，即WCSS/WAP CSS。而无线标记语言的演变过程是如下：HTML 4 -> XHTML 1.0 -> XHTML Basic -> XHTML MP.

WCSS/WAP CSS是CSS2的一个简化版本，增加了WAP特有的扩展。可以很简单的改变XHTML MP页面的布局和风格。

XHTML MP的语法规则

标签必须完全闭合。
标签和属性必须小写。
属性值必须包含在引号标记内。
不允许无属性值存在。
标签必须完全嵌套。

使用XHTML MP+WCSS的优势

最大优点：开发者可使用相同的技术开发适用于WEB和WAP的站点。
支持WCSS。移动设备有很多不同的特征，比如屏幕大小，只需写一次结构，使用不同的WCSS文件即可。
更多的表现控制。
文件cache，避免多次访问同一页面重复与服务器交互
表现和结构的分离：匹配不同无线设备的特征（屏幕大小）、不同客户端代理（PC、PDA、手机）；降低维护成本（新手机）；改变视觉和布局仅需CSS；重复使用CSS；便于工作细分。

使用XHTML MP+WCSS的不足

不同的WAP浏览器对WCSS的支持不同，可能一个属性在这个WAP浏览器上支持，而另外一个不支持。
外部的WAP CSS可能增加第一次访问页面的请求时间。原因：外部WCSS不存在于手机的Cache，必须从服务器下载；XHTML MP文档和外部的WCSS下载是不同的请求，增加了服务器压力；如果使用一个WCSS定义WAP站点的所有表现，该文件大小可能很大；WAP浏览器需要解析WCSS到XHTML MP文档。

Mobile browser工作原理

Mobile browser对于实际页面的处理模式

DOCTYPE

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

较少使用CSS或者不使用CSS

高级CSS语法我们尽量不使用，例如 media queries，现今只有少数的浏览器支持media queries，另外使用了media queries的页面很难在不支持他们的设备上做降级处理。

一些比较好的WCSS教程都推荐把CSS放在外部文件里面，但是这样是非常不实际的，在实践中我们还是把CSS语句放在内联样式中比较好。因为浏览器都要花时间去下载和解析外部CSS文件，而且浏览器根本就不会缓存外部文件或是只缓存指定大小以下的CSS文件。

不要改变链接的颜色，避免使用背景图片。在一些设备上试图使用CSS改变链接的颜色根本就不会起作用，另外即使是相同的颜色在不同的设备上也可能显示的不相同，有时这种不同会导致内容不可读。所以对于背景和链接还是使用浏览器默认的设置比较好。

使用合适的编码

如果不提供编码格式，非英语的字符可能会在浏览器里面显示不正确。

编码使用下面的方式进行指定：<?xml version=”1.0″ encoding=”UTF-8″?>

Mobile browser对于WCSS的支持

WCSS是一系列CSS2属性以及一些WAP特殊扩展属性的聚合，主要具有CSS2知识的web开发者，基本可以掌握WCSS的特性。在研究过程中，针对Mobile browser做了一些基础属性的demo测试，以下是测试页面中可以使用的Mobile browser simulator：

Nokia N70以及Sony K750移动手机simulator：http://mtld.mobi/emulator.php

Openwave simulator下载：

http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/index.htm