it Flies Like Mario – 像Mario一样飞

本文译自dev.opera.com，原作者为Brian Suda
原文链接：http://dev.opera.com/articles/view/introduction-to-the-mobile-web/，转载请注明出处。

Mobile 1：Mobile WEB介绍

简介

Opera的WEB标准课程是关于提倡WEB最佳实践，并完整地覆盖了建立现代站点所需要的所有技能和知识点，它使我们工作和浏览的WEB站点变得更加美好。这个迷你系列展开探讨了核心的WEB标准课程文章，你应该采纳所有的技能和观念，利用他们帮助你优化网站并顺利地在移动设备（或其他另类设备）上运行。首先我会进行一些常规和特殊的思考，在移动设备上运行页面，然后去写样式、编脚本并且测试，因为他们跟Mobile WEB开发相关。

这篇文章的结构如下：

• Mobile WEB的定义
• 与Mobile WEB有关的挑战
• 移动的限制性
  • 屏幕尺寸/分辨率
  • 输入机制
  • 处理能力和可用内存
  • 可用字体和颜色
  • WEB标准的支持
• 移动的优势
  • Mobile意味着随时移动!
  • 摄像头、电话和其他硬件特性
• Mobile web技术
  • WML
  • Compact HTML
  • XHTML mobile profile
  • XHTML
• CSS 和语义标记
  • 图片替换
  • CSS颜色值
• 摘要总结
• 习题

Mobile WEB的定义

“Mobile WEB”是这样一个过度使用的词条：它已经丢失了它本来意义，更糟的是，这种现象仍然在继续并且保持着“移动”的神话，这就是“Mobile WEB”。如果你去让WEB开发人员定义”Mobile WEB”，你会得到很多不同的答案。但重要的是，确定我如何定义”Mobile WEB”，以及你应该如何讨论和思考它。

W3C一直在推动“One Web”的概念。“这就意味着，在不久的将来，不管用户使用什么样的设备，他们所看到的内容和服务都是相同的。但是，这并不是说一致的信息在跨所有平台后同样能一致地呈现。移动设备的上下文环境，例如设备的不稳定性、带宽问题和移动网络性能都会影响表现。此外，一些服务和信息更适合一个特有的用户环境。”来源：W3C Mobile最佳实践One Web页面。

为了移动设备而特别建立一个”Second Web”，与W3C的愿景相违背，它并不是我们想的”Mobile Web”。你应该尽可能地避免去针对移动设备而开发的第二个版本的网站。因为这需要更多的投资，并且会变成一个维护的噩梦。你应该在桌面和移动浏览器下建立一个用户体验说得过去的网站。

使用WEB标准和最佳实践，你不用做太多额外工作，就能够使你的站点拥有友好的移动特性。Mobile Web是商业市场份额不断扩张的角落，越来越受到企业重视。在很多国家，使用移动电话上网的用户多过电脑用户，2008年的移动电话占有率超过世界人口的50% – 大约有40亿台电话。其中10亿能够连接互联网 – 这是一个不能忽视的庞大市场。（来源：Nokia论坛）

与Mobile WEB有关的挑战

Mobile Web开发一直让很多开发者感到混乱和困难，主要是由于很多过度夸大的行业术语和条目让一些新手感觉迷惑和无所适从。比如“内容运营商”、“WAP”、“deck”，其中很多与我们真正的领域关系并不紧密。我们建立一个传统的HTML站点，只是将它们上传到我们的Web服务器空间中，仅此而已。至于用户来自美国、欧洲、亚洲或别的什么地方，是在家用56K猫还是在学校用超级光线，这些都并不重要；你网站和用户电脑之间的那些基础设备，都是一模一样的。

当我们谈论移动设备访问互联网时，这些都是不正确的。从移动运营商的角度看，不同的公司企业使用不同的移动通讯站，他们压缩数据的方式并不一样，并且信号强度、有效性也天差地别。这会直接影响设备软件自身的功能。

虽然这听起来有点吓人，你不应该让它吓唬住你。 作为一个WEB开发者或设计者，你想要你的网站在移动特性上非常友好，你所要做的只是考虑几个因素。这些限制包括编写样式、编写脚本和测试很多很多设备。你现有的开发传统站点的知识结构，其实跟建立Mobile Web站点大同小异。本文的其余部分将总结所有这些问题，给你一个大方向去考虑这个领域中的问题。之后的Mobile文章会提供更深层次的处理方式。

移动的局限性

要建立一个可以运行在大部分移动设备上的移动站点，除了要坚持和PC站点采用相同的WEB标准和最佳实践，你还需要考虑这么多设备上的额外限制。虽然移动基础设施变得越来越好，更多的设备装有WiFi，但仍然有一些问题。但愿，随着时间的流逝，下面这些问题点会被逐渐淘汰和废弃，但在未来一段时期内，这些仍然是需要重点考虑的。你必须认识到不同的移动设备间性能差别很大，在顶级的智能机领域，像iPhone、HTC Touch Diamond和Samsung Omnia（还有其他S60和基于WM的电话），在所有电话中只占有很小的比例。

屏幕尺寸/分辨率

在你小时候，你应该还记得那段时间，当你浏览一个网站，上面会有一个很小的声明“最佳浏览效果：Netscape 浏览器，640×480”。今天，我们不能不考虑更高的分辨率。移动设备上，屏幕分辨率仍然变化多端，而且这种状况看起来也不会改变。

在建设你网站的移动版本时，你如何确保你的设计兼容于各种不同的屏幕分辨率和屏幕尺寸？最简单的策略是保持简单的布局和文档流。终极的理想是保持所有的页面内容在单独一列中，并在其他元素上方，因此不管多宽或多窄的屏幕分辨率，信息始终能够简单地被包裹。你只需要测试你的设计在没有CSS和JavaScript情况下的表现即可。

使用CSS Media属性、JavaScript或meta标记，能够向指定的移动设备发送CSS而不需要服务端编程。你会在这个系列文章之后的部分学到更多这方面内容。

输入机制

移动设备跟台式机有非常不同的输入方式。在你工作中，你的台式机可能会有一个完整的QWERTY键盘、一个多键鼠标，也可能是个数位板等等。但在移动设备上，你可能只有一个数字小键盘。你没有一个完整的QWERTY键盘或鼠标设备。在移动的设备上进行操作，跟在静止的办公桌上操作，体验完全不同。

如果考虑渐进增强来建立你的站点，那么它的功能不应该依赖于任何高级输入设备，但应该便于大家使用任何形式的输入设备。

处理能力和可用内存

移动设备通常会比台式机有更少的内存。这限制了他们对JavaScript、Flash和其他技术的处理能力。这些更容易费电，并且用户体验会变慢，还会增加带宽 – 最后一点还能增加用户下载页面内容的成本（如果他们是按K付费的用户，那成本就更大了）。我们会看到，这些处理能力限制会带领Mobile Web走向XML方式而不是HTML/SGML的方式。

可用字体和颜色

在你的台式机上，您可以愉快地安装各种字体，从serif到san-serif，从symbols到wingdings，但是在移动设备上，你就不能这么爽了。一些设备只有一种“标准”等宽字体，也许还会有加粗或斜体变型。这让企业品牌做了场噩梦，更别说你所有优雅的设计，在各种字体下变得糟透了！

不仅是字体的限制，一些设备还有颜色限制，但这个问题现在很少有了 – 大多数新手机会有成千上万种颜色，单色手机现在很稀有了。

WEB标准的支持

并非所有的手机都配备了像桌面浏览器那样NB的手机浏览器。有些对一般的WEB标准如HTML、CSS和JavaScript提供了完全支持。有些只支持这些标准的某些子集，或者使用完全不同的标准（参见下一节关于WML、cHTML和XHTML-MP的讨论）。有些支持HTML，但不支持CSS或JavaScript。其他的移动浏览器，如Opera Mini，先使用一个代理服务器请求网页，优化并减少了文件大小，然后再将其发送到浏览器进行显示。

这个阶段战略是测试，测试，测试，无尽的测试，以确保你的网站在一些低级浏览器中能够优雅降级。

注：如果你手边没有可用手机，你仍旧可以使用Opera Mini模拟器来测试你的页面。

移动的优势

移动设备相比台式机甚至笔记本，存在一些优势。当你设计移动站点时，可以利用这些特性以提高移动的用户体验。

Mobile意味着随时移动!

手机（或者笔记本之类）可以跟着你到处走动，这个特点开辟了移动定位应用的新发展前景 – 这些应用可以为你所在的位置提供适当的数据，例如附近饭店的建议、交通状况、电影的时间和地点、你朋友的位置等等。当前位置可以被一些设备获取，例如通过GPS全球定位系统、WEB服务和蜂窝三角测量，并且可以通过多种方式在你的WEB应用中使用该信息，例如通过实验性的W3C地理位置API，或通过Yahoo! Fire Eagle这样的API。在这系列文章中，我将不会再谈论任何地理位置服务的话题，因为它是一个高级的主题和技术，现在让你去做为时过早。下面是跟这些技术主题相关的详细链接：

• Google Latitude
• Yahoo! Fire Eagle
• W3C Geolocation API spec
• GeoRSS: Geographically encoded objects for RSS feeds

摄像头、电话和其他硬件特性

移动设备有很多台式机所没有的硬件特性。比如下面这些最明显的：

• 摄像头：现在，买一个没有内置摄像头的手机实在是件很囧的事。最近我们发现某些硬件设备已经开放API，WEB应用已经开始和这些设备产生数据交互了。
• 电话：我们不要忘了，移动电话最主要的用途是给人打电话！使用一个鲜为人知的协议 tel: 可以让这个功能顺畅地融入到你的站点。就像你使用 mailto: 来连接一个邮件地址那样，你可以使用 tel: 去连接一个电话号码。当你点击这个链接的时候，它会自动拨号。

<a href="tel:5121234567">Phone 5121234567 to book a table</a>

注意，链接文本中也要包含这个电话号码 – 虽然看起来有点重复，因为考虑到一些浏览设备不支持 tel: 协议，比如我们的老朋友台式机。

Mobile Web 技术

你所掌握的那些建立传统WEB站点的知识，同样可以很容易的用来开发移动站点。还有一些额外的缩写和一点儿历史，可以帮助我们充分理解目前移动领域的状况和发展史。根据您的目标受众和他们使用手机的类型，你可能只需坚持标准的HTML和CSS，或者可能需要退一步采取其他不同的方式。

WML

WML代表无线标记语言，于1998年创建。在此之前，没有任何标准用于移动设备的设计。

就像Web浏览器使用HTML作为内容结构，旧的移动设备，它的浏览器使用WML – 如果你需要支持真正的旧的移动设备，你就需要去了解它。WML是基于XML（XML就像XHTML和MathML，但不是HTML）跟HTML并不是一码事。HTML是一个单独的文档，在head区放置很多元数据，在body中封装可见元素。但是对于WML来说，并不能把它想象成一个页面，而应该是一副扑克牌。一个WML文件也许会有很多页面或“卡片”被包含在里面。

下面是一个WML文件的例子：

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
 <card id="home" title="Example Homepage">
 <p>Welcome to the Example homepage</p>
 </card>
 <card id="contact" title="Example Contact Page">
 <p>Welcome to the Example Contact page</p>
 </card>
</wml>

使用WML有一些缺点。尽管它支持脚本语言，但并不支持创建很丰富的交互应用。它是为了那些非常小屏幕和低分辨率的设备而设计的。那些旧的WML浏览器不支持像GIF、JPEG等这么普遍的图片格式；而它对应的图片格式：WBMP，只支持黑白配色方案，并且这种图片格式在主流图像处理工具中也很少被支持。WML也不能兼容其他的语言格式，所以你的站点拥有一个WML版本意味着你不得不维护俩个不同版本的网站，这无疑增加了复杂性和项目经费成本。

我们真的不建议你使用WML来建立网站 – 它真的成为了历史。对于那些又老又旧的移动设备，还有Opera Mini可以用，它几乎可以很完美地运行在基于Java的任何平台上。

Compact HTML

和WML的出现几乎同一时间，CHTML也诞生了。CHTML基于Compact HTML，是在九十年代末的HTML早期版本的一个子集。CHTML非常像HTML，而且可以在PC浏览器中浏览。看来早在1998年，他们就开始意识到维护一个网站的多个版本的困难了。

最后，CHTML在日本演化成i-mode HTML，但后来被XHTML Basic和之后的XHTML Mobile Profile取代了。俨然Compact HTML已经成为了历史，不过它也是作者对“One Web”超前意识的一次完美示范。

XHTML mobile profile

XHTML-MP是XHTML标记语言的一个子集，它跟常规的HTML非常像，但也有一些限制。了解标准的HTML会帮助你了解99%的XHTML和XHTML-MP。

XHTML-MP的历史非常有趣。在WML之后，XHTML-MP以常见的XHTML/HTML标记而受到开发工程师们青睐。W3C也决定参与进来并创建了XHTML-Basic，它跟XHTML-MP非常相似。随后，XHTML-MP 1.2发布，并在标记中加入了一些功能，与此同时XHTML-Basic 1.1版本也随即出现，与之呼应。这两个标准，在功能方面几乎可以互换。

由于XHTML-MP和XHTML-Basic都是XHTML的一个子集，他们比标准的HTML有更多限制。这样移动设备可以不必支持大量的代码，只需处理站点中使用的小量内容即可（需要关于XHTML-Basic更多的限制信息，你可以在dev.opera.com阅读David Storey关于移动标记语言的文章）。

下面的代码展示了一个XHTML-MP文档的例子（注意不同的文档类型声明）：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN"
 "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
 <title>Example Page</title>
 </head>
 <body>
 <h1>Example XHTML-MP page</h1>
 </body>
</html>

注意XHTML-MP和XHTML-Basic之间的一个微妙的不同，XHTML-Basic需要服务端支持MIME类型为“application/xhtml+xml”。这样做常常会使旧版IE无法正常解析，IE会把它当做附件进行下载或使用XML方式解析，而不是像正常页面那样打开。XHTML-MP通常使用MIME类型为“application/vnd.wap.xhtml+xml”，但也可以设置成“application/xhtml+xml”甚至是“text/html”，这样任何浏览器都可以正常解析它。

XHTML

最后，还有朴实的XHTML。这是你平凡的HTML的XML版本。如果你是一个牛B的WEB工程师，那么没有什么新鲜的东西能给你。实际上，如果你不打算创造什么疯狂的鬼点子，那么你可能已经驯服了XHTML MP/Basic了。你可以很轻松地切换文档类型声明去查看是否有验证错误。

正像我们看到的那样，所有移动设备可用的标记语言都是来自于XML家庭。其背后的想法是精简浏览器中的代码，以使那些瘦弱的移动浏览器不需要处理错误嵌套的元素和其他常见的错误标记，这样就会节省很多渲染页面时额外的系统资源。

随着越来越多的移动设备使用了其台式机产品上的渲染引擎，浏览器处理标准(X)HTML页面的能力也与日俱增。当然，如果你愿意，你可以坚持使用HTML的文档类型 – 很多移动浏览器也会支持它们；我推荐真正的XHTML文档类型，因为它有一套强制性的规则，会引导你出现更少的错误、更小的下载量以及更少的处理负担。但是这些，还是由你来决定。

CSS和语义标记

这么多年，我们开发了这么多的设计和布局的技巧来让我们的标记尽可能地实现语义化，但是这些在移动设备上却是失败的。

图片替换

一个例子是标题上的图片替换：在标题元素上使用CSS增加一个背景图片，然后移除标题中的文本，只显示背景图，这个图可能是个公司LOGO，或者是图片版的标题文字。这样做可以让设计师拥有更多的设计控制权，同时又可以保持元素中的原始文本，以便屏幕阅读器和搜索引擎的读取。

杯具的是，一些移动设备浏览器只支持一部分或完全不支持CSS标准。在为移动设备优化页面时，你通常要减少文件尺寸和HTTP请求，同时还要保证设计和功能的完备。这是非常困难的 – 不管你用哪种方式为移动浏览器优化或提升用户体验，你都会在其他方便损失一些东西。

让我们看一个简单的图片替换用例，来给你更多想法。下面的例子用了一个很Nice的蓝色渐变背景图，并证明了你想得到一个精确的LOGO和色彩的同时，又要保证不支持CSS的设备能够很语义化地表现，是多么困难的事情。

我们最终想得到图形1这样的效果。

图1：我们最终的标题，带有背景图和图片替换

这个标题的HTML代码如下：

<h1><span>ABC co.</span></h1>

我们优化这个标题的过程可能像这样：

1. 首先，在标题中定义一个默认的蓝背景颜色

h1 { background-color: blue; }

2. 然后，我们利用负值text-indent技巧来挪走ABC co.这个文字，然后用背景图来替换它。

h1 span { text-indent: -9999px; background-image('logo.png'); }

渲染后的效果如图2：

图2：我们的标题文字已经被背景图片替换了。

3. 接下来，我们可以使用渐变图片来为CSS做渐进增强。

h1 { background-color: blue; background-image: url('gradient.gif'); }

显示效果如图3：

图3：我们现在有了公司LOGO和渐变背景。

我们已经达成了我们的基本目标，但是需要记住，在PC浏览器这么棒，并不代表手机浏览器也支持的这么好。

有些浏览器不支持CSS的背景图（甚至桌面浏览器在打印时也不一定支持），因为这些，你的公司LOGO可能不会显示，而且文字也仍然在页面之外不会显示，所以标题最终看起来可能像图4：

图4：如果浏览器不支持CSS背景图，我们就看不到公司LOGO了！

其他浏览器可能对text缩进支持得很糟，所以你能看见俩个文字，很杯具 – 看图5：

图5：在一些浏览器里我们既能看见背景图又能看到默认文本

解决这问题的唯一办法就是避免使用文本缩进属性，改变结构标记，让图像变成image元素，而不是CSS背景图片属性：

<h1><img src="logo.png" alt="ABC co. Logo"/></h1>

这会像图6那样显示 – 跟我们一开始想的一样 – 只是标记不那么整洁了：

图6：使用img元素会使它支持的更好，只是标记不那么整洁了

然而，一些杯具设备甚至不能渲染背景颜色，所以你那张可以使用在任何背景色上的透明LOGO图片，就只能在白色背景上显示白色文字 – 看图7！

图7：不支持背景颜色，意味着你的图片会出现白底儿+白字儿，太可怕了！

作为最后的手段，我们会不爽地决定在LOGO图上使用纯蓝色背景而让更多的浏览器兼容，并放弃使用CSS平铺的渐变背景图 – 见图8：

图8：LOGO图片的背景颜色现在是纯蓝色，所以设备如果不支持CSS背景色，LOGO也仍然可见

虽然这并不是最优化的结构标记，但它在所有设备上的呈现效果是最一致的。在任何开发中，我们都会面临实现方案的权衡，你需要意识到这些问题，并相应地予以解决。

摘要总结

这篇文章只是对Mobile Web开发领域的一个简短介绍，包括你所需要了解的一些技术和设计障碍。我还提到了CSS、结构标记使用时的问题和一些限制因素，以及不同移动浏览器之间的特性。

所有这些不同的表现和解释，都不能被认为是BUG，这只是这些设备的特性而已。虽然手机可能不支持彩屏或者JavaScript，但相应地，电池却可以使用更长时间。当你对特定的设备进行优化时，其他设备上可能又会出别的问题。由此看来，工程师和设计师貌似永远不能实现像素级别的设计，但实际上这些设备间的不同之处却是合理的、可以接受的 – 甚至是可以预期到的。“One Web”的想法并不是指所有设备上都要严格呈现同一种样式。这个目标在台式机上都很难实现，更别说在移动设备上了。

越早接受这个特点并继续前进，你就可以越早地开发更完美的网站。从屏幕尺寸和分辨率，到内置字体和颜色，到图片和HTML的支持程度，并不是所有的手机都相同的，所以最好的办法是，呈现最好的、最灵活的、最一致的设计 – 一致并不意味着完全相同。这才是测试的关键！测试是网页开发中的重要部分，但是由于多种多样的设备和性能，在移动设备中需要特例特办。

习题

• 你应该为你的站点建立几个不同版本的Mobile Web？
• 解释渐进增强
• 移动设备支持XHTML吗？
• WML原生支持那种图片格式？
• 你如何将一个超链接标记为电话号码拨号？

关于原作者

Brian Suda是一位信息专家，目前居住在冰岛的雷克雅未克。在1990年代中期以后，他每天都花大量时间上网。最近，他一直专注于移动领域 – 怎样使更小的设备让我们每天的工作生活更加愉快。他自己的小地盘儿在suda.co.uk，在这里可以找到他过去的项目和很多疯狂的想法。

---

翻译后记：虽然是很基础的文章，但是其中的很多观点是长期受用的，值得一读。另外，第一次尝试正式翻译一篇E文，水平有限，如有错误之处请谅解：）