在美國，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>