JavaScriptでiOS,Android端末を縦向き、横向き、上下逆向きに回転させたときに検出して条件分岐する方法

iOS,Androidのスマートフォンやタブレットなどの「端末を縦向き、横向き、上下逆向きに回転したときを検出をして、それぞれ処理をわける」必要がありました。

JavaScriptでiOS,Android端末の縦向き、横向き、上下逆向きの回転を検出する方法

どうやってやるんだろ・・・と調べていたのですが「JavaScriptを使って検出する方法」がAppleの「Handling Events」ページに載っていましたので、参考にして以下のように書きました。

HTML

<div id="output"></div>

JavaScript

document.addEventListener("DOMContentLoaded", function() {
 updateOrientation();
});

window.addEventListener('orientationchange', updateOrientation, false);

function updateOrientation() {
 let disp = "";

 switch(window.orientation) {
  case 0:
   disp += "縦向き";
   break;

  case -90:
   disp += "横向き：右回転";
   break;

  case 90:
   disp += "横向き：左回転";
   break;

  case 180:
   disp += "縦向き：上下逆向きに回転";
   break;

 }
 document.getElementById('output').innerHTML =  disp + '(' + window.orientation + ')';
}

コードがやっていること

イベントリスナー「orientationchange」を使って、端末を傾けた時の角度を「window.orientation」で取得して「switch」を使ってそれぞれ処理を分けています。

「window.orientation」取得できる値は以下の4パターンです。

例えばiPhoneでその様子を図で表すと、下のような感じですね。

いくつかの案件で使ったのですが、これは今後も使うことがありそうです。勉強になりました。