iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize

回転イベントorientationchange

画面が回転したときに何かさせたいときはorientationchangeで設定できます。
※Androidは2.2から対応しました。2.1の端末では動きません。

$(window).on(“orientationchange”,function(){
	alert("画面が回転しました"); // ここに実行したい処理を書く
});

回転したときだけ実行する場合は、これでいけますが
ページ読み込み直後にも処理を実行したい場合だったら、
resizeもセットで設定します。

$(window).on(“orientationchange resize”,function(){
	alert("この端末の横幅は"+window.innerWidth+"pxです");
});

サンプルページ

画面の方向も判定できる

ヨコ(高さのほうが幅より短い時)とタテ(幅のほうが高さより短い時)でイベントを分ける場合は
Math.abs(window.orientation) で傾きを判別して分岐させます。

$(window).on(“orientationchange resize”,function(){
	alert("画面が回転しました"); // ここに実行したい処理を書く
	if(Math.abs(window.orientation) === 90) {
		alert("ヨコです。"); // ここに実行したい処理を書く
	}
	else {
		alert("タテです。"); // ここに実行したい処理を書く
	}
});

動作検証端末

  • iPhone 4S(iOS5,iOS6)
  • iPhone 5(iOS6)
  • iPad(iOS7)
  • GALAXY SII (Android 2.3)
  • GALAXY SIII (Android 4.1)
  • XPERIA acro (Android 2.3)
  • XPERIA SX (Android 4.1)
  • XPERIA A (Android 4.2)
  • NEXSUS 7(Android 4.3)

Android 2.1のXperia SO-01Bでは、画面回転時にorientationchangeではなくresizeが発火します。

  • Xperia SO-01B (Android 2.1)

参考サイト
[スマートフォン] iPhone と Android の onOrientationChange タイミングの違い
Androidでorientationchangeイベントが意図した通りに動かないので。

関連記事

Pocket