如何进行移动网站的兼容性优化

设计移动网络的网站最难的一点是兼容性和跨设备访问。举个极端的例子，一个经过优化的网站在iPhone或Android设备上看起来很棒，但在 Symbian和BlackBerry上却完全崩溃，无法正常浏览。同样，一个简单的wap站点可能在手机上表现良好，但是在新的或者更先进的设备上浏览效果就大打折扣了。

以下是一些关于移动网站测试和跨设备兼容性的具体技巧和注意点。

1. 缩小焦点

你肯定想让你的网站在所有可能访问的设备上看起来都完美无瑕，但是，对开发者和设计人员来说，这是不实际的。

与其尝试让网站支持每一种平台，不如为网站确立一些清楚的目标平台。例如，你知道你的大部分用户使用iPhone，那么首先就应该把精力放在为网站制作一个iPhone增强版版本。

反之，如果你的流量大部分来自亚洲、中东和南美洲，你可能应该注重网站在Symbian系统上的效果。

还有一件必须很重要的事必须记住，下一代移动设备大部分都在使用基于Webkit渲染引擎的浏览器。诺基亚S40和S60的内置浏览器、苹果的safari、Palm的webOS、Google的Android，还有即将到来的黑莓6.0系统的浏览器都用上了Webkit。

一致地使用Webkit并不意味着他们会用相同的方式渲染内容，但至少能给开发者们一个判断的基线。

2. 使用模拟器

如果手上没有任何你想测试的目标设备，模拟器也是个不错的选择。

列举几个我们最喜爱的工具：

• iBBDemo2 - 一个Adobe Air创建的iPad和iPhone模拟器，据说还即将推出支持Android的版本。这个应用运行速度有点慢，不过对ios设备的呈现效果模拟的很到位。
• Android SDK - Android SDK和模拟器同时发布的，你可以在windows和Mac上安装。
• Blackberry Web Development Page — 这个页面包括黑莓模拟器和黑莓设计技巧。
• Symbian S60 SDKs — 诺基亚的网站上提供sybian s60的资料和模拟器。
• Opera Mini Emulator — Opera有一个桌面版本的移动浏览器和大量的设计资源。

3. 使用多重样式表

在你的站点上包含一个可以用参数来增减功能的样式表，当然，必须是设备支持的。这是个优雅而有效的跨设备处理方法。

这里有一些解决方案：

Dominique Hazael-Massieux去年写过一篇很不错的文章，列举了一些手持设备支持的最基础的、常见的样式表参数。

Dave Shea在2008年提供的解决方案现在仍然适用于很多设备。

最近， Chris Coyier在 CSS-Tricks上讨论了如何通过CSS和jQuery解决屏幕尺寸和多浏览器兼容的问题，还提供了示例代码下载。

4. 设置User Agent

如果你想在电脑的浏览器上更直观地进行测试，改变一下user agent就可以了。每一种设备都带有属于自己的user agent，以便浏览器识别。

Safari和Firefox都有提供改变user agent的插件，你很容易就能看到网站在其他浏览器下呈现的模样。在Firefox上，可以下载Chris Pederick的User Agent Switcher，并且可以添加更多的移动浏览器的user agent。

一旦插件安装，你可以从菜单中选择一个新user agent，如下图所示。

在safari中只要启用开发模式（编辑->偏好设置->高级->选中“在菜单栏中显示‘开发’菜单”），然后从“开发”菜单下的“用户代理”中选择user agent，如下图所示。

5. 使用CMS

如果你的网站使用Wordpree、Drupal这样的内容管理系统，最好的选择是使用一个移动版插件。例如wordpress上流行的WPtouch插件。这个插件有免费和付费的版本，适用于不同的设备，你甚至可以指定哪些设备启用移动版样式表、载入完整的页面。

Drupal也有很多移动插件。