2010年1月30日星期六

能承载移动 Web 应用的唯一浏览器: Mobile Safari

最近拿 iPhone 、 Android 、 Windows Mobile 这三个平台上的内置浏览器来做了一番对比,结果是只有 iPhone 的 Mobile Safari 能够承载现代化的移动 Web 应用,其他移动浏览器的设计思路还停留在上个世纪──能看网页就行,不存在移动应用一说。

我用来做对比的平台是 iPhone 2.0 、 Android 2.0 、 Windows Mobile 6.5 。 iPhone 之所以选择 2.0 ,是因为 3.0 的浏览器跟 2.0 是一样的,尽管我的测试是在 3.0 上做的,但对 2.0 来说也是适用的。 Windows Mobile 6.5 则是在 Windows Mobile 系列中的唯一选择,因为只有它的浏览器是 IE6 内核的,再往前的 Windows Mobile 6.1 都是 IE4 内核的。

拖放

iPhone 对拖放的支持是完美的,使用 touch 系列事件监控触击及拖动,然后使用 preventDefault 禁用浏览器的默认行为(也就是拖动页面显示区域),这就搞掂了。

Android 也支持拖放,具体方案我没有研究过,估计是改用 mouse 系列事件监控触击及拖动,然后使用 preventDefault 禁用浏览器的默认行为。

Windows Mobile 让人很绝望,连拖放也不支持。估计因为这是一个对 IE6 的封装,封装的时候就把浏览器默认行为写死了,所以你不能够通过 mouse 事件监控到任何东西,也无法禁用浏览器默认行为。

手势

最简单的手势,就是通过两个手指靠进和远离来实现放大和缩小,如果这个手势都实现不了,别的手势也就不用测试了。

iPhone 对手势的支持也是完美的,你可以直接使用 gesture 系列事件监控手势操作,也可以用 touch 系列事件监控手势中每一个触点的活动。 preventDefault 同样可以禁用浏览器默认行为(也就是缩放页面显示区域)。

Android 的浏览器不支持多点触击,尽管 Android 的另一些内置应用是支持的,这估计是因为 Google 和 Apple 纠缠不清的多点触击专利官司。因此,如果你要在 Web 应用上支持缩放,就只能在界面上放两个按钮来实现了。

Window Mobile 就不用说了,你不能期望一个缩小版的 IE6 能做什么针对移动 Web 应用的优化。

定位

iPhone 可以使用 W3C 的 Geolocation API 进行定位,而且可以跟踪定位(也就是定位变化时通过事件调用你的函数)。

Android 内置的地图可以定位,但是浏览器就是不提供这个接口,这只能说 Android 就设计为不考虑移动 Web 应用。

Windows Mobile 在安装 Google Gears 后,理论上可以支持定位。这个 ActiveX 嘛,能让你扩展浏览器,实现任何其他浏览器上难以实现的东西。唯一的问题是,这会让人产生疑问──我到底是在 Web 应用开发还是在做客户端应用开发? Microsoft 背负了太多的历史包袱,使得开发者要从客户端应用开发转向 Web 应用开发也不容易。

绘图

iPhone 同时支持 SVG 和 Canvas 。如果你需要面向对象的图形组合方式,你可以选择 SVG 。如果你需要命令式(类似 GDI )的绘图接口,你可以选择 Canvas 。

Android 只支持 Canvas ,这能够满足大多数绘图需求,唯一的问题是你不能把已经绘制的形状如同对象般删除,需要的话只能全部重绘,这就是 Canvas 跟 SVG 在使用上的主要区别。

至于 Windows Mobile ,不仅仅 SVG 和 Canvas 这样的公开标准不支持,连 VML 这样的私有标准也不支持,基本上也就无法绘图了。

样式

iPhone 支持大部分的 CSS3 特性。这是因为 iPhone 1.0 并不支持客户端应用, Apple 为了让开发者能在 Web 上实现跟客户端应用一样的视觉效果, Mobile Safari 必须做到跟 Safari 一样,支持大多数的 CSS3 特性。

Android 支持的 CSS3 特性要少一些。尽管它的浏览器用的也是 Webkit 内核,但 Webkit 管的是布局而不是渲染,在样式渲染方面 Google 的实现总是比 Apple 要慢一步。

Windows Mobile 的话……跟一个 IE6 核心的浏览器讨论 CSS3 ,这不是纯粹浪费口水吗?

体验

上面列举了一大堆的功能,但这一切只是为了实现特定的体验,所以我们真正应该关注的是一款移动浏览器设计为满足怎样的体验目标。

iPhone 上的 Mobile Safari 拥有最高的体验目标设定。在 iPhone 1.0 的时候, Apple 禁止开发人员开发本地应用,只允许开发 Web 应用,因此 Apple 必须为开发人员提供最好的 Web 应用开发平台。

此外, Apple 拥有业界最好的 HIG (人机交互指引),对比之下 Microsoft 的 UX Guide 连 Windows Mobile 都覆盖不到,而 Android 的 UI Guildlines 则显得十分山寨。由于 Apple 鼓励开发者按照 HIG 进行 iPhone 应用程序的交互设计,所以 Mobile Safari 当初就设计为帮助开发者实践 HIG 。至于其他移动浏览器,它们的设计目标则简单得多──只要用户能够在上面流畅使用面向桌面设计的网站就可以了。

正是由于设计目标的差异,使得最终产出的产品存在着巨大的差异。只有 Mobile Safari 能够承载移动 Web 应用,其他移动浏览器只是桌面浏览器在移动设备上的延伸。

4 条评论:

  1. 在这一点的,苹果的创新是肯定的。
    只是苹果向来都不会轻易的把好的东西让其它竞争对手使用,并不只是授权费的问题,而是苹果给不给的问题。
    如果苹果将 Multi-touch 和自己扩展的一些 API 开放,提交到标准委员会,我想其它的浏览器肯定也会立刻跟上。

    回复删除
  2. Apple 也不是不开放,而是慢一步开放。例如 HTML5 的 Canvas 最早就是 Apple 在 Safari 3 中引入的,当时是为了做 Dashboard Widget ,现在也成为标准了。

    Multi-touch 现在有专利问题,至少在美国是这样,所以你在技术上可以实现,也不能提供给用户用。

    回复删除
  3. 我用的是android 1.6,浏览器和google map是支持基本手势缩放的,但不是很顺畅。不知是否是软件级别解决的。

    回复删除
  4. 不顺畅是由硬件造成的,这个没办法……

    回复删除