jQueryMobile1.1.0 final（以下、jqm）もリリースされて、今回本格的にモバイルクラウドアプリ開発に利用しています。色んなデバイスに対応していて、ページ遷移エフェクトやGUIパーツが簡単に利用できて、とっても快適なのですが、まだ作法がよくわからず苦労します。
たとえば$.mobile.changePage()はページ部分のDOMを入れ替えてページ遷移します。
Ajax, hashes & history
Scripting pages
ドキュメントにも記載されているのですが、chagenPage()はdata-role属性がpageの部分のDOMを入れ替えてページ遷移します。ですから遷移先のhead句で指定しているcss,javascriptは読み込まれません。
全コンテンツ、同じjavascript,cssファイルを利用しておけば、問題はなさそうですが、次のような現象に悩まされました。
AページからBページへ遷移するとき、指定したmedia query通りBページがフローされない。
Bページを直接ロードした場合は想定したフローが行われていましたので、cssがうまく適用されないんだなと考えていました。
しかし、共通のcssファイルにしているにも関わらず、なぜ適用されないのかと考えたところ、思い当たる点がありました。
今回のアプリは、ランディングページとほかのページでは、viewportの幅が異なっているのです。
ランディングページでは、1000px以上を設定していますが、ほかのページではdevice-widthを指定するという特殊な仕様です。
最初にランディングしたときにcssのmedia queryで幅が大きいときの設定がキャッシュされて、それが他のページにも適用されるため、device-widthでフローされないということだったようです。
ページごとにveiwportの幅が異なるという仕様は、レアケースとは思いますが、css,jsがそのまま適用されるということは念頭に置いたほうがよいですね。
