【JavaScript】スマホやタブレット端末で、デバイスを回転させたときにイベントを発動する方法

スマートフォンやタブレット端末で、デバイスを回転させて画面が縦横に切り替わったときに、イベントの判定処理を行う方法を紹介します。

回転イベント「orientationchange」を使う

デバイスを回転させたときにイベントを発火させるには「orientationchange」を使います。

jQueryでの記述

$(window).on("orientationchange", function() {
	alert ("画面が回転しました" );
});

jQueryを使用しないときの記述

window.addEventListener("orientationchange", function() {
	alert ("画面が回転しました" );
});

「resize」も併用する

より実践的には、「orientationchange」だけでなく「resize」も併記するとベターです。

$(window).on("orientationchange resize", function() {
	alert ("画面が回転しました" );
});

または

window.addEventListener("orientationchange resize", function() {
	alert ("画面が回転しました" );
});

ぜひ参考にどうぞ。