スマートフォンで端末の向きが変更されたときのみ処理を行う

JavaScriptのresizeイベントをスマートフォンで使う場合、ブラウザのツールバーやアドレスバーが隠れたときにもイベントが発生してしまいます。
端末の向きを変更した時のみresizeイベントを行うようにできるか試してみました。

サンプルコード

resizeイベントが発生した場合と、端末の向きを変更した場合それぞれの回数をカウントするようにしてみます。

HTML

<div id="result">
resizeイベントの回数:<span id="count1">0</span><br />
向きを変更した回数:<span id="count2">0</span>
</div>

JavaScript

$(function() {
	var resizeCount = 0; // resizeイベントの発生した回数
	var orientationCount = 0; // 端末の向きを変更した回数
	var current = orientationCheck(); // 現在の端末の向きを保存

	$(window).on('resize', function() {
		// resizeが発生した時の処理
		resizeCount++;
		$('#count1').text(resizeCount);

		// 端末の向きが変更されたとき
		if(current != orientationCheck()) {
			orientationCount++;
			$('#count2').text(orientationCount);
			current = orientationCheck(); // 端末の向きを更新
		}
	});
});

// 画面の幅と高さから端末の向きを返す
function orientationCheck() {
	var w = $(window).width();
	var h = $(window).height();
	if(w < h) {
		return 'portrait';
	} else {
		return 'landscape';
	}
}

端末の向きは画面幅と高さの長さを比較して判断するようにしています。
端末の向き変更時に処理を行うデモページ