iPhone和Android的WEB应用开发详解
在我们现在的生活中，移动设备的作用日益重要。我们使用它们进行交流。我们使用它们进行导航。我们甚至可以将它们用作方便的手电筒。面向 iPhone 和 Android 平台的定制应用程序极其普及，与此同时，移动 Web 应用程序也开始崭露头角。本文是由两部分组成的系列文章的第一篇，这个系列主要围绕的是开发面向 iPhone 和 Android 的基于浏览器的应用程序。在这个系列文章中，我们将构建能运行在桌面以及这两个移动浏览器内的一个简单的网络监视应用程序。
简介
iPhone 和 Android 平台加起来已经有 10 万多个应用程序可供从二者各自的应用程序库下载。本机应用程序指的是那些用某个平台的 SDK 构建、然后再编译和安装到某个设备上的应用程序。这些本机应用程序提供了对该设备固有功能的全面访问，包括诸如无线联网、蓝牙、数据存储、加速计、指南针 和其他使这些设备变得十分吸引人的出色功能。虽然面向 iPhone 和 Android 平台的本机或定制应用程序极为普及，但移动 Web 应用程序也开始展露了巨大的潜力。移动技术渐趋成熟 — 移动 Web 也随之而来。
本文是由两部分组成的系列文章的第一篇，这个系列主要围绕的是开发面向 iPhone 和 Android 的基于浏览器的应用程序，旨在帮助您开发您自己的移动 Web 应用程序。移动 Web 应用程序的威力不仅仅是在一个移动设备上呈现一个网站。我们还将接触到使移动 Web 开发如此势不可挡的某些核心技术和技巧。
Web 已经成为了平台的不二之选，因为它解决了困扰应用程序开发人员和系统管理员的诸多问题。如下例举了其中的几个解决方案： * Web 应用程序容易部署 — 只需将它们安装或复制到服务器，并让您的客户将其浏览器指向正确的 URL。
* Web 应用程序在高性能的数据中心内可以由服务器群很好地伸缩并能被既有的网站管理工具服务。
* Web 应用程序集中化数据存储并进而简化了灾难恢复计划。
* HTML、Cascading Style Sheets (CSS)、JavaScript 以及图像的综合提供了一种优化的用户界面体验，远远超出了本机 SDK（缺少一种全身心投入的浸入式的游戏体验）的能力并且大多数应用程序体验均不保证游戏或 kiosk 体验。 * 大多数应用程序要求简单易用的 UI 元素来指导用户进行一系列的日常操作。
Web 应用程序发布模型的一个最为吸引人的地方是将软件转变为一种面向订阅的服务，这是一种实实在在的双赢。“为什么？”您不禁要问。让我们一起来看一看。
Web 部署模型允许顾客在购买之前先试用，这样以来，就将顾客的风险和成本减到了最少。如果顾客对试用很满意，那么只需进行一次信用卡（或 PayPal）支
付就可以继续使用此服务。软件供应商亦可以从中受益，因为系统升级被大大简化，减少了支持成本并最终减少了转嫁到顾客上的成本。并 且，SaaS（software as a service）模型还让顾客在享受了软件的种种好处的同时，无需大量的预先投入 — 投资回报在同一个月就可实现，而不是在不可预知的未来。
听起来不错。适合 Web 的概念同样对移动奏效么？这个问题的答案常常是否，直到 iPhone 的出现。为何如此呢？
实际情况是移动 Web 浏览器体验一直非常缺乏。但这一切有了改观，这要归功于一种新技术的出现，即 WebKit，而 iPhone 则让 WebKit 成为了移动领域标志性的大事件。
在短短几年时间内，iPhone 已经从最初的尝试之举成为了移动 Web 客户机的鳌头。为何如此？因为 WebKit 加上可靠的 Internet 连接使得 Web 同样适于移动 — 并且与到目前为止的任何其他的浏览器相比，这一点尤其突出。移动市场的其他玩家已经注意到了这一动态并正在开始使用 WebKit，或正在重新审视它，当然也有人反对它。
那么，什么是 WebKit？
WebKit 和 HTML5
WebKit 是一种浏览器引擎，支撑着 iPhone 内的 Mobile Safari 浏览器以及 Android 内的浏览器背后的技术。WebKit 也在其他的移动环境内有自己的用武之地，但是我们还是将我们的讨论集中于 iPhone 和 Android 平台。
WebKit 是一个开源项目，其起源可追溯到 K Desktop Environment (KDE)。WebKit 项目催生了面向移动设备的现代 Web 应用程序。虽然设备本身的能力和形态因素都相当重要，但移动用户最热衷的仍然是内容。如果移动用户可用的内容只是 Internet 用户可用内容的一个很小的子集，那么用户体验充其量也只能划分为二等。
我们当中的大多数人都更希望生活是连贯的 — 如果我们在家中的笔记本上访问了一个网站，我们同样希望在火车上旅行时仍然访问到同样的内容。内容是最好的应用程序。不管我们身在何处、在做什么，我们都 想要访问到我们的数据。WebKit 让 iPhone 和 Android 平台上可以有丰富的内容。
有一点很值得注意，即 WebKit 还应用在了桌面的 Safari 浏览器内，该浏览器是 Mac OS X 平台默认的浏览器。不管我们讨论的是桌面版本还是 iPhone 或 Android 上的浏览器引擎，WebKit 均优先支持 HTML 和 CSS 特性。实际上，WebKit 还支持尚未被其他浏览器采纳的一些 CSS 样式 — 这些特性正在得到 HTML5 规范的考虑。
HTML5 规范是一个技术草案集，涵盖了各种基于浏览器的技术，包括客户端 SQL 存储、转变、转型、转换等。HTML5 的出现已经有些时间了，虽然尚未完成，但是一旦其特性集因主要浏览器平台支持的加入而逐渐稳定后，Web 应用程序的简陋开端将成为永久的记忆。Web 应用程序开发将成为主导 — 并且不只是在传统的桌面浏览器空间，还将在移动领域。移动将一跃成为首要考虑，而不再是后备之选。
移动 Web 应用程序的考虑
为了访问 Web 开发技术，如今，应用程序开发人员有几个选择。第一，应用程序可严格编写为服务器上的 HTML、CSS 和 JavaScript 文件。当然，HTML 内容可以产生自静态 HTML 文件，也可以从任何的服务器端技术（比如 PHP、 ASP.NET、Java Servlets 等）动态生成。所有这些技术追根到底都可简单地用术语 HTML 指代 — 这不是本文讨论的重点所在 — 并且最为重要的是，受 WebKit-支撑的浏览器能够在移动设备上解析和呈现 HTML。
用户通过在移动设备上（即 iPhone 或 Android）打开浏览器应用程序并输入目标服务器对应的 URL：http://yourcompanyname.com/applicationurl 来访问 Web 应用程序。
特定的某个移动 Web 应用程序总是能找到自己的位置：从一般的 Web 站点到高度特定于平台的移动 Web 应用程序。
一般站点的呈现
WebKit 内的呈现引擎，再配以 iPhone 和 Android 平台上的高度直观的 UI，实际上就使得几乎任何一个基于 HTML 的 Web 站点都能呈现在此设备上。Web 页能被正确呈现，不再像原来的移动浏览器体验：内容被包裹起来或是根本不显示。当页面加载后，内容通常被完全缩放以便整个页面都可见，尽管内容会被缩放得 非常小，甚至不可读，如图 1 所示。不过，页面是可滚动、放大、缩小的，这就提供了对全部内容的访问。默认地，浏览器使用 980 像素宽的视见区或逻
辑尺寸。
图 1. 加载时 Web 页面被完全缩小
当页面加载后，内容通常被完全缩小以便整个页面都可见，但是会被缩放得非常小
尽管这能提供对整个页面的访问，是原来的移动 Web 体验上的一个巨大进步，但还是需要做很多事情才能进一步改进移动体验。
移动友好性
要想使 Web 页面从一般的页面变成支持移动设备的页面，Web 应用程序可以在
几个方面进行修改。
虽然页面可以在 WebKit 中正确呈现，但是，一个以鼠标为中心的设备（比如笔记本或台式机）与一个以触摸为中心的设备（比如一个 iPhone 或 Android 智能手机）还是有区别的。其中主要的一些差异包括 “可单击” 区域的物理大小、“悬浮样式” 的缺少以及完全不同的事件顺序。如下所列的是在设计一个能被移动用户正常查看的 Web 站点时需要注意的一些事情：
* iPhone/Android 浏览器呈现的屏幕是可读的 — 大大好于传统的移动浏览器 — 所以不要急于草草制作您网站的移动版本。 * 手指要大过鼠标指针。在设计可单击的导航时要特别注意这一点 — 不要把链接放得相互太靠近，因为用户不太可能单击了一个链接而不触及相邻的链接。 * 悬浮样式将不再奏效，因为用手指不能进行用鼠标指针进行的 “悬浮”。 * 诸如 mouse-down、mouse-move 等事件在基于触摸的设备上自然大相径庭。这类事件中有一些将被取消，不要指望移动设备上的事件顺序与桌面浏览器上的一样。
这其中的细节在 iPhone in Action 内有详述（参见 参 考资料）。而从我们的目的考虑，我们将更多地着重于 WebKit 所能做的，而不是它不能做的。
让我们来看看要使一个 Web 站点对 iPhone 或 Android 访客具有友好性所面临的最为明显的一个挑战：屏幕大小。我们今天使用的实际移动屏幕尺寸是 320x480。请注意由于用户可能会选择横向查看 Web 内容，所以屏幕大小也可以是 480x320。正如我们在图 1 中看到的，WebKit 将能很好地呈现面向桌面的 Web 页面，但是文本可能会太小以至于若不进行缩放或其他操作就无法有效阅读内容。那么，我们该如何应对这个问题呢？
最为直观也是最不唐突的适合移动用户的方式是通过使用一个特殊的 metatag：viewport。
metatag 是一个放入 HTML 文档的 head 元素内的 HTML 标记。如下是一个使用 viewport 标记的简单例子：。当这个 metatag 被添加到一个 HTML 页面后，我们看到此页面被缩放到更为适合这个移动设备的大小，如图 2 所示。如果浏览器不支持此标记，它会简单地忽略此标记。
图 2. 页面被缩放到更为适合这个移动设备的大小