jQuery Mobile は、すべてのモバイルデバイスで動作しますが、デスクトップコンピュータでは CSS3 のサポートが限られているため、 互換性の問題が発生する可能性があります。
このチュートリアルでは、読みやすさを高めるために Google Chrome ブラウザを使用することをおすすめします。
下に、シンプルで標準的な jQuery Mobile ページを作成しました：
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
Try it Yourself »例の説明：
HTML5 の data-* 属性は、jQuery Mobile 全体で使用され、モバイル・デバイスのために「タッチ・フレンドリー」で魅力的な外観を作成します。
jQuery Mobile では、1つの HTML ファイルに複数のページを作成できます。
ユニークな id で各ページを区切り、href 属性を使用してそれぞれの間をリンクします：
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div>
Try it Yourself »チップ: ロード時間は、多量のコンテンツ（テキスト、リンク、画像、スクリプトなど）を持つ web アプリケーションに影響されます。 内部でページをリンクしたくない場合は、外部ファイルを使用してください：
<a href="externalfile.html">Go To External Page</a>
ダイアログボックスは、特別な情報を表示したり、入力を要求したりするためのウィンドウの一種です。
ユーザがリンクをタップしたときに開くダイアログボックスを作成するには、ダイアログとして表示したいページに data-dialog="true" を追加します：
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div>
Try it Yourself »