jQueryでスマートフォンやタブレットを、縦で持っているか、横で持っているか判定する

スライダー作っているときこれが必要だったのですが、忘れがちなので覚え書きです。

縦で持っているか横で持っているかページ読み込み時に調べる

$(function () {
  var orientation = window.orientation;
    if(orientation == 0){
      //縦持ちの処理
    }else{
      //横持ちの処理
    }
});

orientationは横持ちだと1以上の数値を返してくれるので、これで判定可能です。ただ、これはあくまでページを読み込んだ時に判定するだけなので、縦横グリグリされても反応しません。

回転時にどちら向きかを調べる

$(window).on('orientationchange',function(){
  var orientation = window.orientation;
    if(orientation == 0){
      //縦持ちの処理
    }else{
      //横持ちの処理
    }
});

回転させたときにどちら向きかを判定して処理するので、アクティブに処理を変更できます。

ただし、例えばここでウインドサイズを取得するような処理が必要な場合は、取得出来るのは回転前の数値なので、setTimeoutなんかで1秒ほど遅延させてからサイズ取得すると良さそうです。