スマホサイトで傾き判定のJSを入れるときの注意。

スマホサイトの案件で、縦横傾けた時の判定の処理をJSで取得していたのですが、
Androidさんでおかしな挙動をしていたのでちょこっと調べてみました。

to-Rさんの記事「続Androidブラウザでviewportのwidth指定」のソースを参考に、viewportのwidth指定をしていたのですが、会社にあるAndroid2.2だと若干挙動が怪しい…

Androidブラウザでviewportのwidth指定

var portraitWidth,landscapeWidth;
$(window).bind("resize", function(){
	if(Math.abs(window.orientation) === 0){
		if(/Android/.test(window.navigator.userAgent)){
			if(!portraitWidth)portraitWidth=$(window).width();
		}else{
			portraitWidth=$(window).width();
		}
		$("html").css("zoom" , portraitWidth/320 );
	}else{
		if(/Android/.test(window.navigator.userAgent)){
			if(!landscapeWidth)landscapeWidth=$(window).width();
		}else{
			landscapeWidth=$(window).width();
		}
		$("html").css("zoom" , landscapeWidth/320 );
	}
}).trigger("resize");

どうやら縦横の向きを変えて、スクロールしてからじゃないとリサイズしてくれない様子…

とりあえず、resizeイベントの発生するタイミングでalert入れてみたところ、
スクロールするタイミングでスクロールする度にイベントが走ってるようです。

調べてみると、機種によってタイミングが違うようで、
resizeイベントをorientationchangeイベントにしたら2.2でもいけました。

ただ、onorientationchangeが使えるのは2.2からなので、
2.1ではresizeイベントを採用したほうが良いっぽいです。
また、WindowsPhoneでもresizeを採用したほうが良さそうです。

参考サイト

そんなわけで、スマホサイトで傾き判定のJSを入れるときは
resizeイベントとorientationchangeイベント両方書く必要がありそうです。
(あと、resizeイベントはスクロールする度にイベントが走るのであまり重い処理を書かない方が良さそうです…)

この他にも、scrollイベントやtouchmoveイベントでもiOSとAndroidでイベントの発生タイミングが違うようです。
Webサイトでスマホ・タブレットのスワイプ動作(touchmove)イベントを確実に取得するには | x-fit – クロスフィット –