移动互联网的发展，促生了各种各样的移动Web框架。jQuery是继Prototype之后又一个优秀的JavaScript框架。通过jQuery，我们能够快速地处理HTML文档、控制事件、给页面添加动画和Ajax效果。在Web设计中，我们通常会将设计转化成代码。但是这个过程通常是漫长而又反复，更悲剧的是，代码的可用性还要打个问号。而通过jQuery插件，我们只需在短短的几分钟内就能解决以往需要几小时甚至是几天的问题。 

在本文中，Jake Rocheleau将为我们展示如何用jQuery来创建一个基于移动设备的Web App。在开发过程中，我们将使用CSS3的媒体查询功能来找出当前移动设备屏幕的的最大分辨率，根据不同的分辨率使用不同CSS。此外，Media Queries还可以帮助我们在小屏幕上隐藏导航菜单以展示更多的内容。我们还会使用jQuery来帮助我们使用Ajax.Load()，以便激活菜单栏和加载外部页面内容。 

• LIVE DEMO
• SOURCE CODE

1. 定义页面布局

首先，我们先要查看HTML页面，并且使用CSS样式来确定页面的样式。在开头我会跳过许多不常见的Meta标签（对所创建的Web App没有直接的影响）。但是我们仍然要注意一些代码片段（在下面我已经列举出来）。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

X-UA-Compatible是用来描述文件在某些浏览器上的渲染程度。不得不说， 在HTML5编程过程中这是一个非常有趣的事情。所以我不用太担心这个问题。但重要的是，如果我们恰当地使用Meta标签，它会给我们许多意想不到的帮助。例如加入关键字会被大型搜索网站自动搜集，可以设定页面格式及刷新和让网页自动适应移动浏览器大小等。

内容主体

在BODY中，我通过ID#w创建了一个Wrapper Div。在其中我将页面布局分成了#pagebody和#navmenu两个部分。整个页面的宽度为640px，所以#pagebody和#navmenu的宽度可以精确地计算。

我给导航菜单赋了一个较低的z-index值来保证#pagebody总能在最顶部面显示。

<div id="pagebody">
    <header id="toolbarnav">
        <a rel="external" href="#navmenu" id="menu-btn"></a>
    
        <h1>HK Mobile</h1>
    </header>
    
    <section id="content" class="clearfix">
        <h2>Welcome to the Mobile Site!</h2>
    </section>
</div>

<div id="navmenu">
    <header>
        <h1>Menu Links</h1>
    </header>
    
        <ul>
         <li><a rel="external" href="#homepage.html" class="navlink">Home</a></li>
         <li><a rel="external" href="#about.html" class="navlink">About Us</a></li>
         <li><a rel="external" href="#advertise.html" class="navlink">Advertise</a></li>
         <li><a rel="external" href="#write.html" class="navlink">Write for Us</a></li>
         <li><a rel="external" href="#contacts.html" class="navlink">Contacts</a></li>
         <li><a rel="external" href="#privacy.html" class="navlink">Privacy Policy</a></li>
        </ul>
</div>

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;
}