jQueryMobileの設定。

jQuery

基本はHTML5,CSS3,そして以下のhead内のコード

<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js">

meta name="viewport" はデバイス毎の異なる解像度を適したレイアウトに直してくれる。
link経由のスタイルシートやスクリプトはjQueryMobileに適したそれぞれのテンプレートを引用。
（つまりjQueryMobileはテンプレートにそったデザイン・レイアウトに偏るのでオリジナルデザインが難しい）

meta name="format-detection" content="telephone=no" はiPhoneのsafari限定の仕様で
safariがサイト内の電話番号らしき数字の文字列を発見すると自動的にリンクを張ってしまうのを防ぐコードです。

一般的なWEBサイトとjQueryMobileサイトの違い

一般的なWEBサイトは1ページがイコールhtmlファイルひとつと定義しますが、
jQueryMobileサイトは「div data-role="page"」ひとつで1ページと定義します。
つまりjQueryMobileサイトのひとつのhtmlファイルは複数のページを有していることになります。

<body>

<div data-role="page" id="index">
 topPage
</div>

<div data-role="page" id="about">
 to-Rについて
</div>

<div data-role="page" id="seminar">
 セミナー
</div>

<div data-role="page" id="access">
 アクセス
</div>

<div data-role="page" id="contact">
 お問合せ
</div>

</body>

上記のコードでプレビューをすると一番上の「div data-role="page"」の
「id="index"」だけ表示されます。

これはスマホなどの限られた表示面積のデバイスによる仕様で、複数のページを1度に表示するよりもファーストビューで一つのセクションを
一面に表示した方が見た目にもいいからです。

一般のWEBサイトですとここから別ページに移るにはリンクによるページ遷移が必要になりますが、
jQueryMobileサイトの場合は複数のページが全ては表示はされていませんが
出力はされていますのでページ内リンクが可能です。

<div data-role="page" id="index">
 topPage
 <p><a href="#about">to-R</a></p>
</div>

<div data-role="page" id="about">
 to-Rについて
  <p><a href="#index">topPageへ</a></p>
</div>

このように今まで「div data-role="page"」の後に「id="〜"」としてIDを付記してきましたが、ページ内リンクで各ページに移動する意味を持ってました。