iPhone和Android的WEB应用开发详解(4)

} catch (e) { alert(e); } }

快速浏览一下上述的 HTML，不难发现有如下几个点需要注意：

* 其中有两个外部加载的 JavaScript 文件：一个针对的是 jQuery 库，一个针对的是我们应用程序的 helper 函数。

* 使用 viewport metatag 来调整内容的呈现伸缩。 * 加载了一个主样式表: netmon.css。

* 询问 userAgent 来决定要加载哪个额外的样式表：一个面向 iPhone，一个面向 Android，还有一个面向 Desktop。 * 当页面加载时，数据的显示通过 jQuery 以及 netmon.js 文件的一个 helper 函数实现。

* 页面内还包含若干 div 标记。

* 最后，这里还有一个页面链接以显示 userAgent 字符串。它之所以存在是考虑到方便性和展示的目的。它与应用程序本身无关。

在深入研究这些样式表以及 netmon.js 文件之前，让我们先来看看当前的这个应用程序。还记得吧，我们针对三个受支持的平台使用了三个不同的样式表。并且每一个都是用不同的背景颜色设置好的以协 助开发过程。 图 9 显示了这个具有蓝色背景的 Desktop Safari 浏览器。

图 9. 显示在桌面 Safari 浏览器内的应用程序

具有蓝色背景的 Desktop Safari 浏览器

图 10 显示了在 Android 浏览器内呈现的这个具有红色背景的应用程序。

图 10. 显示在 Android 浏览器内的应用程序

在 Android 浏览器内呈现的这个具有红色背景的应用程序

图 11 显示了在 iPhone 浏览器内呈现的这个具有绿色背景的应用程序。

图 11. 显示在 iPhone 浏览器内的应用程序

显示了在 iPhone 浏览器内呈现的这个具有绿色背景的应用程序

在名为 netmon.js 的文件内的主样式表，如清单 2 所示。

清单 2. 主样式表

body {

color: #888888;

font-family: Helvetica; font-size:14px; margin: 0px; padding: 0; }

.details { margin: 0px; padding: 0px;

background-color: white; border: solid;

border-width: 1px;

-webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; }

.OK {

color: #000000; }

.BAD {

color: #ff0000; }

.odd {

background-image: -webkit-gradient(linear, left top, right bottom,from(#ccc) ,to(#999)); }

.even {

background-image: -webkit-gradient(linear, left top, right bottom,from(#999) ,to(#ccc)); }

.serverentry a { float: right; color: #ffffff; }

.serveritems{ color: #000; }

#header h1 { margin: 0; padding: 0;

text-align: center; color: #000; }

这些特定于平台的样式表实现了如下三个主要目标：

1. 更改颜色主题以展示样式表的影响以及基于 userAgent 将某个特定的样式表指向某个特定的平台是多么地简便。 2. 调整桌面和移动平台之间的字体大小。