jQuery Mobileの特徴

スマートフォン向けのフレームワークは数多く存在していますが、jQuery Mobileの大きな特徴としては以下が挙げられます。

• クロスプラットフォーム対応（iOS、Android、Windows Phone、BlackBerry等）
• セマンティックなHTML記述による高いアクセシビリティ性
• HTML、CSSの知識があれば、簡単に構築が可能
• Dreamweaverでのモバイル開発機能追加

jQuery Mobile公式サイト
また、jQuery Mobileの特徴の一つとして、ページ遷移時のトランジション（アニメーション効果）が標準で機能されている点があります。
この機能はAjaxといって、非同期通信を利用して遷移先のデータを取得し、通信結果に応じて動的にページの内容を書き換えるという動きにより実現しています。
以下の章ではこのAjaxによるページの遷移方法とその問題点・解決方法についてご紹介致します。

Ajaxによるページ遷移の問題点

jQuery Mobileで使われているAjaxでのページ遷移ではCSS、jsファイルの読み込みを行っているHEAD部分はそのままで、BODY部分のみ置き換わる動きをします。
一見ページが切り替わったように見えますが、URLは#で繋がれ実際にはページ遷移をしていない状態なのです。

この仕様でのWEBサイト制作においては、下記のようなデメリットが存在します。

• 1ページ1HTMLという概念ではなくなるため、ページ固有のcss、jsが使えない（全ページ同じcss、jsを使用しないといけない）
• ページ個別での解析タグ（Google AnalyticsやAdSense等）を入れるには別途スクリプト追加による対処が必要
• HTMLのID重複に注意が必要
  Ajaxで遷移先のデータを取得し現在のDOMに挿入する動きになるので、遷移元のページに同じIDを持つ要素があると、1つのDOM中に2つ以上の同じIDが含まれる事になってしまう。
  IDが重複するために、jQueryなどでセレクタでの要素をうまく取得できない。

上記のような理由で、jQuery Mobileを使用したサイト構築にあたってはAjax遷移を無効化させる設定が必要なケースが多くあります。

http://webnaut.jp/markup/597.html