【JavaScript】スマホの縦向き・横向きを判定する方法

JavaScriptで端末の向きを判定する方法について紹介します。

端末の傾きの取得方法

端末の傾き角度はscreen.orientation.angleで取得できます。

0が縦向き、90または-90が横向き、180が逆さまの縦向きになります。

JavaScript

var angle = screen.orientation.angle;
console.log(angle); // 0 or 90 or -90 or 180

端末の傾きの検知方法

端末の傾きを検知するにはwindow.addEventListenerでorientationchangeを登録します。

端末の向きを絶対値で取得すると横向きは90となるので、90であれば横向き、それ以外は縦向きとして処理を分岐させるのがおすすめです。

縦向きは0、逆さまの縦向きは180となるので、縦向きは絶対値でも1つに絞れない点に注意してください。

JavaScript

// 端末の傾きを検知する
window.addEventListener("orientationchange", () => {
  // 端末の傾きを絶対値で取得する
  var direction = Math.abs(window.orientation);
  if(direction == 90) {
    // 横向きの処理
  } else {
    // 縦向きの処理
  }
});

実装サンプル

最後に端末の傾きに応じて「縦向き」「横向き」のテキストを表示する実装サンプルを紹介します。

実際にスマホを傾けてみてテキストが随時変更されることを確認してみてください。

今回は以上になります。

HTML

<div id="direction"></div>

JavaScript

window.addEventListener("orientationchange", () => {
  // 処理呼び出し
  getDirection();
});

// 端末傾き検知時の処理
function getDirection() {
  // 端末の傾きを絶対値で取得する
  var direction = Math.abs(window.orientation);
  if(direction == 90) {
    // 横向きの処理
    document.getElementById('direction').innerHTML = '横向き';
  } else {
    // 縦向きの処理
    document.getElementById('direction').innerHTML = '縦向き';
  }
}

getDirection();

See the Pen screen_orientation1 by Usagi (@naniwa_usagi) on CodePen.