メディアクエリ・ヘルパー - jQuery Mobile 1.0b1 日本語リファレンス

jQuery Mobileは HTML 要素に対して、縦横方向と、汎用的な最小/最大幅を示すCSSメディアクエリを擬似的に実現するためのクラスを付加します。これらのクラスは、ロード時、サイズ変更時、方向変更時に更新され レスポンシブ・レイアウト を(メディアクエリをサポートしていないブラウザ上であっても)実現します。

方向クラス

HTML要素はデバイスの向きに応じて “portrait”(縦) か “landscape”(横) のいずれかのクラスを、必ず持っています。CSSを次のように指定できます。

.portrait {
  /* 縦方向時に適用するスタイルをここに記述 */
}
.landscape {
  /* 横方向時に適用するスタイルをここに記述 */
}

最小/最大幅ブレークポイント・クラス

初期状態で、最小/最大幅のブレークポイントとして 320,480,768,1024 が用意されています。これらのポイントは、クラスに直すと “min-width-320px” や “max-width-480px” のようになっています。これはメディアクエリの代わり(あるいは拡張)になります。

.myelement {
  float: none;
}
.min-width-480px .mylement {
  float: left;
}

jQuery Mobileに含まれる多くのプラグインが、このブレークポイントを活用できるようになっています。たとえばフォーム要素内のラベルは、横幅が480ピクセル以上の場合は隣に並ぶようになります。このような挙動はCSSにより、次のような形で実現されています。

label.ui-input-text { 
  display: block; 
}
.min-width-480px label.ui-input-text { 
  display: inline-block; 
}

ブレークポイントの追加

ブレークポイントを独自に設定するには $.mobile.addResolutionBreakpoints 関数を用います。引数には単体の数値か、複数の数値の配列を渡します。設定したピクセル数で、最大/最小幅ブレークポイントが作成されます。

// 1200ピクセルのブレークポイントを追加
$.mobile.addResolutionBreakpoints(1200);

// 1200ピクセルと1440ピクセルのブレークポイントを追加
$.mobile.addResolutionBreakpoints([1200, 1440]);

メディアクエリーの実行

jQuery Mobileは、特定のメディアクエリーが適合状態にあるかをテストすることが出来ます。シンプルに $.mobile.media() をメディアタイプやクエリーを渡して呼ぶだけです。ブラウザがそのクエリーをサポートしていて、現状が適合している状態であれば TRUE を返し、そうでなければ FALSE を返します。

// メディアタイプが screen かどうかをテスト
$.mobile.media("screen");

// 480pxよりも横幅が広いかどうかをテスト
$.mobile.media("screen and (min-width: 480px)");

iOSのレティーナディスプレイかどうかをテスト
$.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2");