jQuery Mobileの大きな特徴として、ひとつのHTMLドキュメントに複数のWebページを記述できるという点がある。
Webブラウザに表示されるページにはui^page-activeクラスが付与され、それをCSSのdisplayプロパティで管理することで、ページの表示/非表示をコントロースする。
Google Chromeでローカルファイルを読み込めるようにするオプション。
アイコンを右クリック→プロパティで「リンク先」を編集する。
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
を、
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
というように、--allow-file-access-from-filesを追記する。
Webブラウザをはじめとする、Webサーバにアクセスするプログラムの総称をユーザエージェント(User Agent)と呼ぶ。
Webサーバ側では、ユーザーエージェントを判断して、PC用、スマホ用のページを見せたりする。
Google Chromeでユーザエージェントを切り替える(変更する)
Chromeでユーザーエージェントを偽装するのは簡単で、
1．F12でデベロッパーツールを開く
2．一番右下にある歯車をクリック
3．出てきた画面の左側「Overrides」をクリック
4.User Agentにチェックを入れて、設定するユーザーエージェントを設定する。
また、この歯車のところのDevices metricsをチェックすると、スクリーンの大きさなどを調整できる。
Emulate touch eventsをチェックすると、スマホにおけるタッチやフリックといったイベントをエミュレートすることができる。
参考
かんたん7ステップ きほんからわかる jQuery Mobileコーディング
- 作者: 大津真
- 出版社/メーカー: インプレスジャパン
- 発売日: 2013/03/21
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る