スマホの画面回転時にイベントを発火して何か処理する方法【JavaScript，jQuery】

スマホの画面回転時にイベントを発火する方法

早速ですが、JavaScript（jQuery）でスマホやiPadの画面の回転に応じてイベントを発火させるには、以下の２つのイベントを使うのが定番です。

「resize」は画面（ビューポート）のサイズが変更された時に発火するイベント。
「orientationchange」は端末の向きが変更された時に発火するイベントです。

これをaddEventListenerでイベントリスナーに登録して使います。

縦→横向きに変更時

横→縦向きに変更時

resizeとorientationchangeのどちらのイベントを使用しても画面回転で発火させることができます。しかし、それぞれに少し注意点がありますのでこの記事で使い方とポイントを纏めたいと思います。

では早速参りましょう・ｗ・

orientationchangeで画面回転時に発火させる

まずは「orientationchangeイベント」を使って画面回転時に発火させる方法です。
読み方はorientation＋changeでオリエンテーションチェンジ（日本語で方位変化）で良いはずです。

簡単ですがサンプルコードは以下の通りです。

JavaScriptの記述例

window.addEventListener('orientationchange',function(){
  //ここに画面回転時に処理したい内容
  alert("orientationchangeイベントが発生しました。");
});

使い方はaddEventListenerにorientationchangeを突っ込むだけです。

何かを処理する関数を作り、分ける場合は以下を参考にどうぞ。

function SP_rotate(){
  alert("orientationchangeイベントが発生しました。");
}
window.addEventListener('orientationchange',SP_rotate);

addEventListenerに任意の関数を指定してももちろん動きます。

jQueryの記述例

orientationchangeイベントはjQueryでも簡単に使えます。

$(window).on('orientationchange',function(){
  //ここに画面回転時に処理したい内容
  alert("orientationchangeイベントが発生しました。");
});

なお、WordPressでjQueryを使う場合は「$」を「jQuery」に変更しないと動かないので注意です。

このようにorientationchangeを使えば簡単に画面の回転時にイベントを発火することが出来ます。が、orientationchangeは個人的に（世間的にも？）非推奨です。

orientationchangeを使う場合の注意点

orientationchangeの発火条件である「端末の向きが変更された時」はすなわち画面が回転した時なのでこれを使えば万能そうなのですが、閲覧端末によって動作が異なるという点には注意が必要です。

少し調べたところ、orientationchangeイベントで画面の回転を検知しようとした時にAndroid端末でうまく動かない。もしくは別の問題が発生してしまうというケースがあるようです。

また、対応ブラウザを以下のサイトで調べたところChromeやEdge、Safariといった主要ブラウザがことごとく未対応（No support）になっていました。

この記事を書くにあたりiPhone（iOS16）のSafariで確認したところ、問題なく動作しましたが、orientationchangeでスマホの画面回転を検知して発火させる時は端末によって意図しない動作になるかもしれないので、注意が必要かもしれません。

resizeで画面回転時に発火させる

続いて「resizeイベント」を使って画面回転時に発火させる方法です。

こちらは文字通り、画面がリサイズされた時に発火するものですが、画面が回転して画面の縦横が切り替わったタイミングでも発火します。

使い方は先ほどのorientationchangeとほとんど同じです。

JavaScriptの記述例

window.addEventListener('resize',function(){
  //ここに画面回転時に処理したい内容
  alert("resizeイベントが発生しました。");
});

jQueryの記述例

$(window).on('resize',function(){
   //ここに画面回転時に処理したい内容
  alert("resizeイベントが発生しました。");
});

先述の通りorientationchangeイベントには少し不安要素が残るので、僕はこちらのresizeイベントの方を画面の回転検知、発火するのに使っています。

ただ残念なことに、このresizeイベントにも使用時の注意点があります。

resizeを使う場合の注意点

resizeイベントはその名の通り、画面サイズが変更されたのを検知して発火するものですが、これがスマホのブラウザとかなり相性が悪いです。

というのもスマホのブラウザはスクロール操作に応じてアドレスバーやメニューバーを出したり引っ込めたりしますが、この時画面サイズが変わってしまうのです。

つまりresizeイベントはスマホの縦スクロールでも発火してしまいます。

コチラも実際に検証してみました。その時の様子が上の画像です。

サイトを開いた時はアドレスバーとメニューが表示されていますが、下にスクロールすると引っ込みます。この時resizeイベントが発火しました。

検証ついでにSafariの設定からアドレスバーを画面上部の表示に変更してみても同じ結果でした。やはり縦スクロールでresizeイベントが発火します。

この問題を解決するには、あらかじめ回転前の画面の横幅（window.innerWidth）を取得しておき、resizeイベントが発火した時にこれと現在の画面の横幅を比較することで対処できるのですが、長くなるのでこれは別の記事（↓）にしました。

まとめ

以上、JavaScript、jQueryでスマホやiPadの画面が回転した時にイベントを発火する方法でした。

スマホの横画面でWebサイトを見る人は少ないと思いますが、iPadを考慮すると画面が回転した時に何かを処理したいという事は結構あるかもしれませんね。

画面回転は「resizeイベント」か「orientationchangeイベント」を使えば簡単に検知して発火できますが、どちらも使い方にクセがあるので気を付けましょう。
ではではこのへんで・ｗ・