在本文中，Jake Rocheleau将为我们展示如何用jQuery来创建一个基于移动设备的Web App。在开发过程中，我们将使用CSS3的媒体查询功能来找出当前移动设备屏幕的的最大分辨率，根据不同的分辨率使用不同CSS。此外，Media Queries还可以帮助我们在小屏幕上隐藏导航菜单以展示更多的内容。我们还会使用jQuery来帮助我们使用Ajax.Load()，以便激活菜单栏和加载外部页面内容。
LIVE DEMO
SOURCE CODE
　　1. 定义页面布局
　　首先，我们先要查看HTML页面，并且使用CSS样式来确定页面的样式。在开头我会跳过许多不常见的Meta标签（对所创建的Web App没有直接的影响）。但是我们仍然要注意一些代码片段（在下面我已经列举出来）。






　　X-UA-Compatible是用来描述文件在某些浏览器上的渲染程度。不得不说， 在HTML5编程过程中这是一个非常有趣的事情。所以我不用太担心这个问题。但重要的是，如果我们恰当地使用Meta标签，它会给我们许多意想不到的帮助。例如加入关键字会被大型搜索网站自动搜集，可以设定页面格式及刷新和让网页自动适应移动浏览器大小等。
　　内容主体
　　在BODY中，我通过ID#w创建了一个Wrapper Div。在其中我将页面布局分成了#pagebody和#navmenu两个部分。整个页面的宽度为640px，所以#pagebody和#navmenu的宽度可以精确地计算。
　　我给导航菜单赋了一个较低的z-index值来保证#pagebody总能在最顶部面显示。

　　我在每个.html页面前都添加了井字符（#）。每当点击一个链接时，URL栏都会出现和下推主体内容。当引用的ID没有被重载时，我们只能通过JavaScript来重新调用它。
　　2. CSS定位
　　我们CSS代码中并没有太多复杂的内容。大多数的定位工作都是通过手动完成的，完成之后才会交由jQuery来操作。同样，这里也有一些我们要注意的代码片段。

/** @group core body **/
#w #pagebody {
position: relative;
left: 0;
max-width: 640px;
min-width: 320px;
z-index: 99999;
}

#w #navmenu {
background: #475566;
height: 100%;
display: block;
position: fixed;
width: 300px;
left: 0px;
top: 0px;
z-index: 0;
}

　　上面的这段代码分别定义了页面中两个部分的样式。导航菜单的宽度为300px，这样一来，就为我们浏览页面内容留下了一点空间，打开和关闭菜单按钮也固定在左侧。这里最重要的部分就是导航菜单的z-index的属性值和位置（z-index: 0；position: fixed）。
　　我们顶部栏标题也是一个有趣的部分。它被放置在一个固定的位置，会随着页面内容的滚动而滚动，大多数的iOS App上都有这个效果。

/** @group header **/
#w #pagebody header#toolbarnav {
display: block;
position: fixed;
left: 0px;
top: 0px;
z-index: 9999;
background: #0b1851 url('img/tabbar-solid-bg.png') top left no-repeat;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
height: 44px;
width: 100%;
max-width: 640px;
}

#w #pagebody header#toolbarnav h1 {
text-align: center;
padding-top: 10px;
padding-right: 40px;
color: #e6e8f2;
font-weight: bold;
font-size: 2.1em;
text-shadow: 1px 1px 0px #313131;
}

　　移动规则
　　很容易注意到，在背景上我使用了蓝色的横条作为标题栏。这个标题栏的大小为640x44px，从而能够与页面的布局保持吻合。不仅如此，我还为iPhone/iPad视网膜显示屏设计了一张@2x图片。大家可以从上图看到这些图片，或者从SOURCE CODE中获取。
{System}/demo/img/tabbar-solid-bg@2x.png
{System}/demo/img/tabbar-solid-bg@2x.png

/** retina display **/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
#w #pagebody header {
background: #0b1851 url('img/tabbar-solid-bg@2x.png') top left no-repeat;
background-size: 640px 44px;
}

#w #pagebody header #menu-btn {
background: url('img/nav-btn@2x.png') no-repeat;
background-size: 53px 30px;
}
}

　　菜单箭头的设计
　　在导航菜单方面，我为每个菜单链接的右侧设计了一个指向右方的箭头图标。相信大多数CSS3的爱好者都会喜欢这么做，这确实是一个不错的创意。
　　我使用transform变量在导航内容后面创建一个小边框，所以我们可以在左边的框架内任意的移动，除此之外，在悬停状态下我们可以很方便地改变边框的颜色和样式。更令人惊叹的是，你只需要使用基本的HTML5和CSS3样式就可以完成这些边框地设计。
　但首先，我们要进入JavaScript编码世界。

#w #navmenu ul li a::after {

content: '';

display: block;

width: 6px;

height: 6px;

border-right: 3px solid #d0d0d8;

border-top: 3px solid #d0d0d8;

position: absolute;

right: 30px;

top: 45%;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

}

#w #navmenu ul li a:hover::after { border-color: #cad0e6; }

　　3. jQuery动画设计
　　在编写这些自定义代码过程中，我新建了一个script.js文件。大家可以根据自己的需要来直接编写