jQuery Mobile 方向イベント

jQuery Mobile orientationchange イベント

ユーザーが端末を垂直または水平に回転したときに、orientationchange イベントがトリガーされます。

モバイル

モバイル

orientationchange イベントを使用するには、それを window オブジェクトに追加してください：

$("window").on("orientationchange",function(){
  alert("方向が変更されました！");
});

callback 函数には、イベントオブジェクトを設定するパラメータがあります。このイベントオブジェクトは、端末の方向を「portrait」（端末が垂直に保持されている場合）または「landscape」（端末が水平に保持されている場合）として返します：

例

$("window").on("orientationchange",function(event){
  alert("方向は：" + event.orientation);
});

自分で試してみる

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

例

$("window").on("orientationchange",function(){
  if(window.orientation == 0) // ポートレート
  {
    $("p").css({"background-color":"yellow","font-size":"300%"});
  }
  else // Landscape
  {
    $("p").css({"background-color":"pink","font-size":"200%"});
  }
});

自分で試してみる

ヒント：window.orientation プロパティは portrait ビューで 0 を返し、landscape ビューで 90 または -90 を返します。