jQuery Mobile オリエンテーション・イベント

❮ 前章へ 次章へ ❯

jQuery Mobile orientationchange イベント

orientationchange イベントは、ユーザがモバイルデバイスを縦または横に回転させたときにトリガされます。





Mobile


orientationchange イベントを使用するには、window オブジェクトにアタッチします:

$(window).on("orientationchange",function(){
  alert("The orientation has changed!");
});

コールバック関数には、次のモバイルデバイスの向きを返す、イベントオブジェクトを引数として1つ持つことができます: "portrait"(デバイスは縦向き)か "landscape"(デバイスは横向き):

$(window).on("orientationchange",function(event){
  alert("Orientation is: " + event.orientation);
});
Try it Yourself »

orientationchange イベントは、window オブジェクトにバインドされるため、window.orientation プロパティを使用して、 たとえば、ポートレートビューとランドスケープビューを区別して、さまざまなスタイルを設定することができます:

$(window).on("orientationchange",function(){
  if(window.orientation == 0) // Portrait
  {
    $("p").css({"background-color":"yellow","font-size":"300%"});
  }
  else // Landscape
  {
    $("p").css({"background-color":"pink","font-size":"200%"});
  }
});
Try it Yourself »

window.orientation プロパティは、ポートレートの場合は 0 を、ランドスケープの場合は 90 か -90 を返します。


❮ 前章へ 次章へ ❯