Mobile Web下的编码设计

在这篇文章中，我将努力揭开Mobile Web开发的神秘面纱，换句话说，也就是为了移动设备上的用户体验可以被接受，代码得怎么设计。我将阐述“Mobile Web”与普通网站的不同之处、可以让网站成功运行在移动设备和桌面浏览器上的基本技巧、一些Mobile Web设计中的建议和禁忌、以及大量资源 – 你可以去找到更多有用的信息。

Mobile Web和普通网站到底有何不同呢？

这是个很好的问题 – 首先，也许我们应该从“什么是Mobile Web”的问题开始。毕竟，用户用移动设备访问的Mobile Web，跟他们在家里用台式机访问的网站是独立的不同的部分。当我说“Mobile Web”时，我指的是“通过移动设备访问的网站”。

在Opera，我们全身心投入而创造出的浏览器允许你查看整个网络，不管浏览设备是否有这个能力。只要你在建立网站时，付出一点儿细心、尊敬并遵循 Web标准，你就可以为所有人所有设备创建只有一个版本的网站 – 唯一的一个网站。但是，有一些例外情况 – 在某些情况下，只有分版本的网站才行得通，一会你会看到这一点。

移动领域的竞争环境并不平衡

在桌面领域，对于我们前端开发者来说，形式正在好转 – 大多数现代浏览器已经对Web标准支持的非常好了，无论是Opera、Firefox（以及其他Gecko内核浏览器）或者Safari（以及其他 Webkit内核浏览器），甚至IE带给我们的痛苦都比原来少了。虽然IE6的用户群体数量仍然非常杯具，但这应该归结于大多数人封闭的使用习惯等因素。但是，移动设备领域在这方面却是不同寻常的：

• 你拥有能为“Full Web”提供支持的浏览器，像iPhone上的Opera Mobile和Safari。Opera Mobile使用了与桌面版本相同的渲染引擎，所以对标准的支持相差无几。

• 你拥有并不很爽的浏览器，例如IE，它们对Web标准仅能提供有限的支持。它们中的一部分只支持WAP（例如WinWap），另一些支持其他像 CHTML或HTML-MP这样的标准（例如日本NTT DoCoMo的iMode浏览器），还有一些只支持Web标准中的有限子集（例如Netfront、Pocket IE、以及Blazer）。

• 最后，你拥有OperaMini，以及其他通过代理机制的浏览器。它主要只是作为连接用户和一个大服务器群的客户端界面。当用户提交一个URL时，客户端会让服务端查找这个页面。然后它会把页面转换成一个轻量级的二进制标记语言，将它格式化成适合移动设备查看的形式，并发送回客户端显示。这种方式的最主要优势，是可以使页面体积减少90％ 左右，帮助用户节省很多带宽费用。这种标记语言表明Web标准并不能很好的表现在移动设备上，因为在这种服务的方式下，OperaMini对 Ajax/JavaScript某些方面将支持的不是很好 – 在这儿有更详细的解释。

注意：不要指望你的超级Ajax和DOM脚本动画网站在移动设备上会有良好表现。JavaScript在移动设备上的支持程度千差万别。时刻提供优雅降级吧。这种做法有一个例子叫做Hijax。

我们可以看到，在移动设备的跨浏览器兼容方面，你要思考的问题有很多。但是不要怕 – 我随后的建议会给你指引一个正确的方向；并且随着时间的推移，移动浏览器对标准的支持将会得到改善，届时我们前端开发者真的再也不需要为它们操心了。你问我这一切什么时候会实现？Who knows！