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

Ads by Google

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

回転イベント「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 ("画面が回転しました" );
});

ぜひ参考にどうぞ。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google