在美国，IOS和Android设备占了很大比重，而美国以外的地方主要是Nokia的设备占统治地位。jQueryMobile为了在尽可能多的 设备上运行，承诺将支持绝大部分移动设备/系统。在早些时候（2010年9月），jQuery的作者John Resig透露了一张jQueryMobile对各种设备/系统的支持表格（见下）。对于每个系统来说，jQueryMobile将他们的支持情况分为 A（好），B（一般），C（基本）三个等级。
学习jquery mobile 时候有一个比重要的基础概念必须弄明白--页面模版。jQueryMobile始终贯彻渐进增强的设计观念来满足你的开发需要，其核心能使得基本的HTML标签在所有的浏览器中生效，在此基础之上，再对网页的行为和效果进行增强，解决繁杂的移动浏览器们带来了巨大的挑战：一方面某些浏览器（例如Android的原生浏览器，Safari移动版等）都基于WebKit的一个变种版 本（WebKit是一个web渲染引擎，Google Chrome桌面版，Apple的Safari都采用了该引擎。WebKit并不知道当前运行的网络的好坏，操作系统是什么甚至屏幕滚动到了哪里，为了让 WebKit知道这些情况，操作系统/浏览器/设备厂商都需要基于WebKit来构建自己的浏览器程序），并带有丰富的特性。另一方面Nokia的 Symbian和Windows Mobile 6（及更早的版本）这些胡乱支持标准的设备又占有相当大的市场。雪上加霜的是，WebKit在不同移动设备中还有不同的版本。这意味着jquery mobile 构建的网页在等级较高的浏览器中能获得非常优秀的体验，而在较差的浏览器也能正常的使用。
在一个HTML页面中可以有多个page页面，每一个page页面下有各自的header、content以及footer。如下例子就是一个包括多个页面的情况：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multi Page Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">/* Shared scripts for all internal and ajax-loaded pages */</script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<!-- First Page -->
<div data-role="page" id="main" data-title="Welcome">
<div data-role="header">
<h1>This is Multi-Page Example</h1>
<ui>欢迎来到 jquery mobile 新闻社区</ui>
</div>
<div data-role="content">
<a href="#bbs" data-role="button">社区论坛</a>
<a href="#news" data-role="button">新闻快报</a>
<a href="#question" data-role="button">在线解答</a>
</div>
<script type="text/javascript">
/* Page specific scripts here. */
</script>
</div>
<!-- Second Page -->
<div data-role="page" id="bbs" data-title="bbs">
<div data-role="header">
<h1>社区论坛</h1>
</div>
<div data-role="content">
<li>欢迎来到 jquery mobile 提问社区</li>
<li>建议你在学习jquery mobile 过程多思考，多实验</li>
</div>
</div>
<!-- third Page -->
<div data-role="page" id="news" data-title="news">
<div data-role="header">
<h1>新闻快报</h1>
</div>
<div data-role="content">
<h>jquery mobile 支持众多移动终端快速发展</h>
<p>在美国，IOS和Android设备占了很大比重，而美国以外的地方主要是Nokia的设备占统治地位。jQueryMobile为了在尽可能多的 设备上运行，承诺将支持绝大部分移动设备/系统</p>
<a href="#main" data-role="button">返回首页</a>
</div>
</div>
<!-- fourth Page -->
<div data-role="page" id="question" data-title="question">
<div data-role="header">
<h4>在线解答</h4>
</div>
<div data-role="content">
<h3>管理员很懒，居然翘班，不在线，请电话投诉他！</h3>
<a href="#main" data-role="button">返回首页</a>
</div>
</div>
</body>
</html>
页面效果：
在多页面问文档中，每个页面可以有一个page或者dialog的data-role，每一个page页面有其特有的id属性值，通过该值可以实现多页面之间的切换导航。最初加载多页面时候，只有第一个页面得到增强并显示出来,这主要是由于jquery mobile采用url方式，一次性加载多个页面会导致。如上述例子中，访问该html，首先增强展现的是代码中注释First Page部分的page。如何想要直接访问其他page页面，则可以通过在多页面文档名字之后添加#带上具体页面的id如id为news的页面，直接访问e.html#news可以直接访问到这个页面。
而其他后续页面，只有在被请求并缓存到DOM中，才会被增强，该方式十分适合有要求快速响应时间的页面情况。内部多个页面之间的导航，必须通过page的id来进行引用。如：<a href="#main" data-role="button">返回首页</a> 中超链接返回首页的写法。
另外需要注意当连接到一个包含多个页面的页面时，必须为其连接添加rel="external"。如<a herf="e.html" rel="external">home</a>