ktyr report

iOSのorientationchange時の処理順
画面サイズ変更 -> resize -> orientationchange

Androidのorientationchange時の処理順
orientationchange -> 画面サイズ変更 -> resize
又は 画面サイズ変更 -> resize -> orientationchange
※端末(Androidのバージョン?)によってはこの順番の時もある

よってjsで端末回転時の処理をする際は下記のようにする。

デモ

var oEventCount = 0;
$(window).off('.ori').on('orientationchange.ori resize.ori',function(e){
	oEventCount++;
	if(oEventCount < 2){
		return;
	}
	oEventCount = 0;

	//do something
});

・resizeイベントだけで済む場合もある。
・iOSの場合、スクロールでステータスバーが出たり引っ込んだりした時にresizeイベントが走る

こっちのほうが良い場合も

var oEventId;
$(window).off('.ori').on('orientationchange.ori resize.ori',function(e){
	clearTimeout(oEventId);
	oEventId = setTimeout(function(){
		//do something
	},300);
});