移动设备是一种全新的媒介。桌面系统中总结出来的最佳实践在移动系统中完全不适用。移动设备、移动生态系统和移动用户具有独特的特性，要求采用不同于以往的最佳实践进行移动Web开发。
本文将讲述移动Web的语法、语义和生态系统。您将学习如何构建适应性强、响应迅速并且符合标准的移动Web站点，并确保其可以在任意移动浏览器上运行。一些简单的开发提示和技巧将改进小尺寸屏幕中的Web可用性。您可以进一步充实移动Web站点，使其适用于高级智能手机浏览器(具有电子邮件、桌面功能的Web浏览等集成Internet功能的高端手机中的浏览器)，能够呈现完整的HTML并实现专有扩展。开发工作完成后，您将了解如何在实际移动设备上进行全方位的测试，优化移动Web页面以便于网络传输，以及通过避免代码转换保留更多适用于移动生态系统的程序。
移动Web好比是西部荒野。一些重量级人物控制着整个生态系统，战争随处可见。意志坚定的人可以在遥远的地方占有财产、构建家园、建立社区以及与世隔绝的繁华村落。但是，要想生存下来，最好的方式还是全副武装。而对于移动开发人员来说，在这片荒野中生存最有效的武器就是：
◆ 对移动标准和最佳实践具有专业而深入的了解
◆ 批判性思维技能和正确对待怀疑
◆ 千方百计找出正确的语法
◆ 正确评价移动用户的需求
基于标准的移动Web开发方法确保在各种移动浏览器和平台之间的兼容性和可用性。要想在移动Web开发领域取得成功，必须了解所有规则，同时还要了解什么时候可以忽略规则。
1.1 移动Web和桌面Web
从根本上说，只有一种Web。Web内容是可以使用各种Web浏览器查看的标准化标记、样式、脚本和多媒体。在本书中，按照惯例将这种Web称为桌面Web。我们可以在台式计算机、笔记本电脑、上网本上通过Firefox、Opera或Internet Explorer等浏览器访问桌面Web，进行网上冲浪。
桌面Web由通过TCP/IP计算机网络链接在一起的大量服务器构成。这种服务器称为Web服务器，很多Web服务器实现超文本传输协议(HTTP)共享文档和文件。Web服务器通过统一资源标识符(Uniform Resource Identifier，URI)提供对文本文件、标记文档和二进制资源的访问。
在HTTP请求中，客户端向Web服务器发送所需资源的URI以及一组请求头，其中一个请求头包含MIME类型列表，该列表公布客户端支持的内容类型。
在HTTP响应中，Web服务器除了向客户端发送请求的文档(标记、文本或二进制文件)外，还会附带另外一组头，其中一个头包含MIME类型，描述传输到客户端的文档的文件类型。
移动Web在桌面Web的基础上添加了新的MIME类型、标记语言、文档格式和最佳实践，为小尺寸屏幕提供优化的Web内容，并可解决移动设备上的资源限制、Web浏览器可用性差等问题。
移动Web在Web生态系统中引入了一些新的组件，包括：
◆ 针对移动设备进行了优化的标记语言和样式
◆ 可区分移动标记和桌面HTML的MIME类型
◆ 具有大量功能的浏览器客户端
◆ 使内容更适合上述客户端的网络代理
如果将移动Web比作西部荒野，桌面Web就可称得上是世外桃源。桌面Web是一种较好理解的安全开发环境，采用根据已制定的标准建立的客户端技术。截止到本书编写时，桌面Web已经走过将近20年的风雨历程了。桌面浏览器客户端是公开的、免费的、可轻易获得并且经常更新。目前人们使用的主流Web浏览器是由少数软件供应商和开放源代码项目生产的，这样就降低了跨平台Web开发中的测试难度。在桌面生态系统中，如果一个Web页面到达目标浏览器，则其标记在传输途中几乎一直存在，Internet中的中介服务器不会更改这些标记。网络所有者和Internet服务提供商(Internet Service Provider，ISP)对于通过自动标记适配和内容重新打包优化和改善网络体验没有任何兴趣(请参阅表1-1，了解定义移动Web和桌面Web的特征列表)。
表1-1 移动Web和桌面Web的特征
| 移 动 Web | 桌 面 Web | |
| 平均会话长度 | 2~3分钟 | 10 ~15分钟 |
| 最小屏幕尺寸 | 90×60 | 800×600 |
| 最大屏幕尺寸 | 对于常用的设备为240×400 | 无限制 |
| 浏览器供应商 | 超过12家并且还在不断增长 | 只有两家，市场份额超过5% |
| 浏览器故障 | 经常出现故障。除使用可更新操作系统的智能手机外，其他设备都无法修补 | 很少出现故障并且可以修补 |
| W3C 标准 | 不规范。在移动行业中，有时会忽略甚至违背这些标准 | 接受并充分应用 |
| 标记语言 | WML CHTML XHTML Basic XHTML-MP XHTML HTML |
XHTML、HTML |
| JavaScript和AJAX | 90%的移动设备都不支持。采用ECMAScript-MP和JavaScript。文档对象模型(Document Object Model，DOM)和支持的事件不同。一般都采用专有的API | 通常情况下支持 |
| 可寻址的客户 | 全球30亿移动订阅者 | 总计10亿台笔记本电脑、台式计算机和服务器 |
桌面Web过滤软件可以阻止查看让人讨厌的网页，但是，Web过滤器的工作方式是阻止页面访问，而不是调整页面语法。
移动Web开发是一门全新的学科，这样说的原因如下：
◆ 移动Web生态系统是全新的。移动Web使用桌面Web的既有知识，但它也有一些从移动设备独有的特性衍生出来的新的最佳实践和疑难问题。桌面隐喻并不适用。带宽占用量是一个比较关键的问题，即使对智能手机也是如此。使用JavaScript架构以及异步JavaScript和XML (AJAX)等Rich Web 2.0功能时务必要谨慎，否则有电池电量耗尽的风险。运营商经常会控制和阻止移动Web站点的流量。在移动标记传输到移动浏览器的途中，代码转换代理经常会尝试重置移动标记的格式。最后，必须编写一些保护性的程序，降低代码转换器暴露以及出现移动网络问题的概率。
◆ 移动Web用户是全新的。移动Web用户采用独特的使用模式和导航方法。移动用户具有强烈的目标导向性和位置感知能力。在影响移动用户的移动Web浏览体验的主要因素中，即包括在服务区内外漫游时的网络访问问题。实际上，对成本敏感的移动用户宁可取消网络交易，也不愿冒因错误操作而支付费用的风险。
◆ 移动Web浏览器是全新的。移动浏览器具有其他浏览器所不具备的优势，同时也有一些与众不同的问题及相应的解决方法。Web标准实现不彻底是经常出现的问题。Web页面格式错误会对移动设备产生严重的影响，包括浏览器崩溃或设备重置。用户非常需要JavaScript和AJAX等高级Web功能，但这些功能会影响电池的使用寿命。市场上有数十家移动浏览器供应商，确保Web标准遵从性的重担就落在了原始设备制造商(Original Equipment Manufacturer，OEM)和运营商肩上。
#p#
1.2 移动标记语言
目前，各种移动设备采用的移动浏览器一般是基于一定的标准，但又不一定遵从标准，这样，用户可以查看多种移动标记语言的Web内容，这些语言包括：
◆ XHTML和HTML
◆ XHTML移动配置文件(XHTML-MP)
◆ CHTML (iMode)
◆ 无线标记语言(WML)
1.2.1 HTML和XHTML
HTML是移动标记语言的旗舰产品。作为标准Web标记语言，HTML被Web开发人员和设计人员广泛使用。很多移动浏览器都支持完整的HTML标记集，但是这些浏览器可能无法满足直接查看桌面HTML网站的用户体验。对于移动设备来说，屏幕分辨率、存储容量和带宽都存在限制，有必要开发出更加优化的标记和样式。当然，移动用户还希望针对他们的移动特性开发出一些专用的服务。
XHTML在严格遵循XML语法的基础上，结合运用HTML标记集。对于移动浏览器来说，处理和呈现XML格式的标记要比处理松散的HTML语法规则容易得多。对于支持HTML的移动浏览器来说，XHTML是最佳标记。
Android、iPhone、Nokia Series 60、Windows Mobile和BlackBerry设备中的智能移动浏览器都支持XHTML、HTML、JavaScript和AJAX。此功能集以及可选择添加的大量客户端缓存和CSS扩展功能构成了交互式移动Web应用程序的基础。本书介绍如何针对智能手机浏览器构建高级的Web应用程序。
注意：
仅针对智能手机开发的移动Web站点可以使用HTML 4的完整功能集，并且在不久的将来，还可以使用HTML 5的完整功能集。但是，在移动Web站点上使用HTML和XHTML需要支付一定的费用。使用HTML和XHTML后，无法与使用旧版浏览器的高容量功能手机(市场上大量销售的低成本、功能很少的手机)兼容(尽管智能手机做了大肆的宣传，但还是有大量的功能手机用户在移动Web上冲浪)。使用桌面标记还需要引入代码转换器，也就是通过重置标记格式优化桌面Web使之适用于移动设备的网络应用程序。代码转换器可以使系统认为标记是用于桌面浏览器的，同时机器会对标记进行重新调整，使其适合移动浏览器。本书教您应对以下两种情况：如何最大程度地使HTML与移动浏览器兼容；如何避免对针对移动设备进行了优化的HTML进行双重代码转换。
1.2.2 XHTML移动配置文件
XHTML移动配置文件(XHTML-MP)由开放移动联盟(http://openmobilealliance.org)指定和维护，实际上，它就是移动Web的标准标记。移动配置文件，顾名思义，这种标记语言是XHTML的一个子集，专用于移动计算设备，包括手机：
◆ XHTML-MP 1.0设定了移动标记语言的基本标记。
◆ XHTML-MP 1.1添加了<script>标记并支持移动JavaScript。
◆ XHTML-MP 1.2添加了更多表单标记和文本输入模式。截止到本书编写时，很多移动浏览器还不支持XHTML-MP 1.2。
实际上，所有新开发的移动Web站点都使用XHTML-MP为移动用户提供服务。
这种标记语言在移动Web中引入了一些常用的概念，如分离标记结构和显示(presentation)。XML格式的标记定义文档结构，而级联样式表(CSS)控制显示。大多数XHTML-MP移动浏览器都支持无线CSS、CSS移动配置文件和/或CSS 2。当然，大多数意味着并不是所有支持XHTML-MP的移动浏览器也支持CSS。
欢迎进入移动Web开发的荒凉世界。本书将教您如何使用设备数据库确定移动浏览器的疑难问题，如不能很好地支持CSS，这样您就可以对标记进行相应的调整。幸运的是，移动浏览器不断发展，Web标准遵从性和整体质量水平都得到大幅提升。
XHTML-MP是无线应用协议(Wireless Application Protocol，WAP)第二版中规定的标记语言。尽管从技术上讲不够准确，但业界还是习惯性地将XHTML-MP称为WAP2。
1.2.3 WML
无线标记语言(WML)是一种旧版的简单标记语言，适用于低功耗的移动设备。1998年，无线应用协议论坛(也就是现在的开放移动联盟)对这种语言进行了标准化处理。WML是可扩展标记语言(XML)的一种行业说法，主要使用隐喻卡片组和卡片。一个标记文档可以包含多个用户界面(UI)屏幕或卡片。WML最初设计用于在内存和处理能力极其有限的单色移动设备上显示文本。移动开发人员使用集成开发环境(IDE)或文本编辑器以纯文本的形式编写WML，或者使用服务器端Web脚本语言生成代码。在某些移动网络中，WML网关服务器会将标记编译为二进制格式，以压缩的形式传输到设备，这样可以提高传输速度。支持WML的移动浏览器反编译并显示该二进制WML，也可以直接显示文本WML。
WML包含两个主要的版本：WML 1.1和WML 1.3。与前者相比，WML 1.3引入了对彩色图像的支持。实际上，现在的所有移动浏览器都支持WML 1.3以及其他标记语言。目前美国境内所使用的移动设备中，大约5%的设备其浏览器仅支持WML，剩下的95%支持并首选XHTML-MP、XHTML和/或HTML。
WML是WAP规范第一版中规定的标记语言。因此，在移动行业里，也将WML称为WAP1。这在技术上讲并不是很准确，因为WAP规范覆盖整个协议栈(包括标记本身)，但尽管如此，还是沿用这种叫法。
WML被认为是旧版移动Web语言。这种语言实在是老套，以至于Apple iPhone为追赶潮流而在其支持Web的移动浏览器中明确表示不再支持WML。尽管WML语言已经存在了很多年，但其结构简单和压缩二进制格式的特点还是吸引了开发人员使用它开发一些简单的移动Web应用程序，或为旧式手机提供文本移动Web体验。
例如，俄勒冈州波特兰市的Trimet公共交通系统提供了一个简单的WML网站，用于查看公交车和轻轨的时刻表。每条线路中的每一站都显著地标记了一个唯一的数字ID，以便于乘客识别。Trimet网站用户在WML表单中输入站点ID即可了解下一班公交车和轻轨列车的预计到站时间。在该网站中，还可以按路线编号或位置浏览交通时刻表。Trimet交通网站为移动用户提供的功能很有限，却非常重要。文档很小，即使在2 G的移动网络中，也可以实现快速浏览。由于该网站使用WML，因此实际上目前使用的每部手机都可以查看交通时刻表。若要最大程度地提高市政移动网站在不同驾乘人群中的应用，则WML是一种非常不错的选择。您可以访问http://wap.trimet.org在Trimet WML网站中查询交通时刻表。Trimet驾乘人员还可以使用许多其他移动Web站点和应用程序，包括许多面向iPhone和其他智能手机的移动Web站点和应用程序。有关详细信息，请访问网站http://trimet.org/apps/。
#p#
1.2.4 其他移动标记语言
本节主要介绍在移动Web中广泛使用的标记语言，包括XHTML、HTML、XHTML-MP和WML。除此之外，还有其他一些未被广泛采用的标准化移动标记语言。其中一些标记语言要么超前标榜在移动设备上实现可靠的Internet访问，要么并入其后更流行的标准。对于这些标记语言，本书将简要说明其优势，而不做深入的探讨。
1. HDML
WML是移动Web的旧版语言，但它并不是第一种可在手机上查看的标记语言。这一殊荣属于HDML (Handheld Device Markup Language，手持设备标记语言)，它是WML的前身，由Openwave (一家移动基础设备提供商和浏览器供应商，以前称为Unwired Planet，也就是“无线星球”)设计。HDML在1997年被提交到W3C，但始终未标准化，也未被广泛采用。不过，HDML对WML的语法形成和使用产生了很大的影响。
20世纪90年代中期，手机都是黑白的，而且大多数使用的是三行显示屏。某些早期的移动设备支持显示HDML文档。HDML浏览器对于语法的要求非常不严格。
作为一个喜欢尝试的人，我曾经使用HDML制作了一个基于表单的网站原型，并将其用于我的模拟手机。该网站可以运行，但我还是放弃了，因为浏览器强制执行少量达到HDML文档最大文件的大小。这种浏览器也最终没有向普通用户公布。在开发过程中，我经常用无效的HDML语法使浏览器崩溃，每次发生崩溃时，HDML手机都会输出存在错误的文件名和出错的C源代码的行号。这个过程非常有趣。
2. CHTML
日本的DoCoMo移动网络中的I-mode移动设备使用HTML的一个子集，即压缩式HTML(Compact HTML，CHTML)，显示Web内容。CHTML由日本的移动浏览器公司Access所创建，并于1998年提交到W3C进行标准化。CHTML采用HTML的结构，用一组严格限定的标记将Web内容传递到非常小的信息应用程序，如低端手机。CHTML不支持以下HTML功能：
◆ JPEG格式的图像(支持GIF格式)
◆ 表格
◆ 图像地图
◆ 多种字体和样式(在I-mode设备中，仅支持一种字体)
◆ 背景色和背景图像
◆ 框架
◆ 样式表
CHTML仅在日本市场中销售的移动设备上使用，与此同时，通过CHTML开发的各种I-mode服务正在使用XHTML迅速地重新实现。
3. XHTML Basic
对于功能受限的移动设备，在从HTML降级到XHTML-MP的过渡阶段，建议使用XTML Basic移动标记语言。该建议由W3C在2000年提出，开放移动联盟对XTML Basic的标记支持进行了扩展，从而创建了XHTML-MP。
很多移动浏览器都支持XHTML Basic DTD，但移动Web开发人员更倾向于使用支持更为广泛的XHTML-MP。
1.3 移动脚本语言
移动浏览器中的客户端脚本编写曾经是智能手机的专属领域，但这种状况发生了日新月异的变化。到2010年，很多畅销移动设备都将支持ECMAScript-MP或移动JavaScript。移动JavaScript是一种非常奇妙的工具，用于创造交互式的移动Web体验。与任何客户端移动技术一样，在真实的移动设备上测试JavaScript对于有效地完成开发工作至关重要，这是因为在模拟器上测试以及在Firefox中进行测试可能无法发现某些语法问题和性能问题，而这些问题很可能会在目标移动设备上发生。
移动JavaScript和桌面JavaScript的语法在本质上是一样的。移动版本严格遵守脚本行必须以分号结束。移动JavaScript减少了支持的字符集，并排除了计算密集型语言元素。与对应的桌面语言相比，移动语言的不同之处在于移动浏览器中的DOM和事件支持。DOM和事件支持可能会因浏览器供应商和版本的不同而有所差异。若要成功完成移动JavaScript开发，则在设备上进行测试至关重要。
客户端脚本编写也可能会降低移动Web浏览性能。移动用户可以禁用JavaScript执行。因此，即使是专为移动设备设计的支持JavaScript的标记，也必须进行适度地调整，使之适应非脚本环境。灵活的移动Web设计首先实现标记，然后通过客户端脚本编写反复地对其进行增强。本书介绍设备识别和内容自适应技术，使得能够根据条件仅在支持JavaScript的移动浏览器上包含脚本。
注意：
WML提供了自己的脚本语言，即WMLScript。WMLScript需要从WML文档进行链接，并且支持表单验证、对话框、卡片导航和URI导航。本书中未对WMLScript进行讨论，我们关注的是在移动浏览器的客户端脚本编写中采用的脚本语言，也就是JavaScript和ECMAScript-MP。
1.4 移动样式表
用于移动标记文档的样式表遵循三种CSS行业术语之一。最佳的移动浏览器支持CSS2，也就是在桌面Web中与XHTML和HTML结合使用的样式标准。支持XHTML-MP的移动浏览器使用无线CSS和/或CSS移动配置文件，二者都是CSS2的子集，彼此独立而又存在一定的联系，可以在有限的浏览器上支持通用的样式属性。移动CSS子集删除了计算密集型CSS功能，如属性继承和3D元素对齐方式。
1.5 移动行业组织和标准机构
对于灵活的跨平台开发而言，遵守移动Web行业标准和最佳实践非常重要。一些Internet和移动行业机构掌管着移动Web标准和推荐的最佳实践，这些机构包括：
◆ W3C：该机构负责针对移动Web开发和测试标准化移动标记语言以及发布最佳实践文档。
◆ 开放移动联盟(以前称为WAP论坛)：该机构负责标准化移动标记和样式语言，以及其他设计用于实现跨设备、地域和移动网络进行互操作的移动技术。
◆ dotMobi(http://mtld.mobi)：该机构控制.mobi顶级域，以及必须与设备适应并与移动设备兼容的内容。该机构还负责发布移动Web开发的最佳实践，并且通过在线社区对移动开发人员、市场营销人员和运营商进行相应的培训。
◆ 移动营销协会(Mobile Marketing Association)：该机构集中管理针对移动设备营销和广告的各种技术建议和最佳实践。
◆ 开放移动终端平台(Open Mobile Terminal Platform，OMTP) (www.omtp.org/)：这是一个由运营商创立的移动行业组织，主要负责标准化从Web应用程序访问移动设备的操作。
移动Web开发是一门新兴的学科，各种各样的标准和最佳实践如雨后春笋般涌现出来。聪明的移动Web开发人员应深谙这些行业文档，通过批判性的思维确定，在开发面向特定地域和移动设备型号的移动Web内容时应适用哪些最佳实践。
1.6 移动生态系统
移动生态系统是一个丰富多彩、杂乱无序而又令人兴奋的世界。作为移动Web开发人员，您可以期待接触这个生态系统中的一些部分。OEM (原始设备制造商)和移动软件供应商控制着在移动设备上运行的移动浏览器软件。移动运营商销售手机和网络服务。运营商控制着移动设备的Web访问。独立的移动开发人员社区通常围绕某一移动平台或服务组件组织。在开发人员社区中，从事移动Web和应用程序项目的人员会友好地进行一些技术上的交流。
练习1：浏览移动Web
通过在各种不同的手机上浏览Web来熟悉移动Web。搜集或向朋友借一些不同制造商生产的移动设备，要求这些移动设备具有不同的屏幕尺寸和样式(尤其是触摸屏)。最低限度是，至少要有一部功能手机和一部智能手机。接下来，使用这些移动设备执行以下操作：
◆ 导航到Web浏览器并启动。
◆ 浏览针对移动设备进行了优化的网页。如果找不到针对移动设备进行了优化的网站，可以使用移动搜索引擎进行搜索，可供选用的移动搜索引擎包括Google (http://google.com)、Yahoo!(http://yahoo.com)或Bing(http://bing.com)等。接下来，在移动Web搜索结果类别中查找移动Web页面的链接。
◆ 浏览桌面网页。
◆ 使用某种移动搜索引擎搜索附近的餐馆，查询餐馆的电话号码，然后查询从您当前所在位置到餐馆的行车路线。
记录下您在移动设备上浏览Web并使用各种功能时的体验，然后思考下面的问题：
1. 在手机上找到Web浏览器的难易程度如何？完成启动浏览器的操作总共经过多少次按键？
2. 是否可以在手机上查看移动网页？这些网页是否可用？原因是什么？
3. 是否可以在手机上查看桌面网页？这些网页是否可用？原因是什么？
4. 桌面网页是以适应视图显示，还是以代码转换视图显示？这种网页视图对浏览体验产生什么影响？
5. 您选用的是哪种移动搜索引擎？原因是什么？是否可以轻松地区分针对Web优化和针对移动设备优化的Web搜索结果？
6. 在手机上搜索附近的餐馆的难易程度如何？是否可以通过点击电话号码开始呼叫？查询到的行车路线是否可行、准确？
最后，确保本练习中所使用的每个移动设备都有数据计划，以允许浏览公共Internet网络。
1.7 代码示例
本节中涉及的代码和标记是使用PHP 5通过Eclipse PDT在Windows台式计算机上编写的。代码在Linux、Apache、MySQL和PHP(LAMP)环境中托管。本书中示例代码的主题是一个虚构的新鲜农产品市场，称为Sunset Farmers’ Market。
可以从http://learnthemobileweb.com/books/或者http://www.tupwk.com.cn/downpage上找到本书中的代码示例、勘误表和其他信息。也可以在移动设备上浏览http://learnto.mobi/books/以在移动浏览器中查看代码示例。
1.8 小结
本章介绍了桌面Web和移动Web之间的基本区别。移动设备一般都外形小巧，而移动用户往往具有目标导向性，从而有必要开发面向移动设备和移动用户的专用移动标记语言。此外，介绍了一些用于移动Web的标记语言和脚本语言，在此过程中，还提到了一些非主流的语言，但仅仅是为了说明其历史意义，并无其他用意。作者对移动生态系统进行了调查研究，并介绍了一些移动行业组织和标准机构。
【编辑推荐】
