スマートフォンで縦向き、横向き時のイベントを取得する

スマートフォン(iphone,android)で、横向きや縦向きに向きを変更した時、
media-queryを使ったcssで横幅等は自動的に変わりますが、
関連のjQueryのプラグイン等が変更されないということがありました。

その際、横向きにした時、縦向きにした時を検出して、
イベントを取得することにしました。

そのメモ・備忘録になります。

基本的には、
jQueryを使用しました。

jQueryのイベントで、
orientationchangeというイベントがあるということで、そちらをまず使用してみました。

$(document).ready(function(){
        	window.onorientationchange = function(){
			alert("向きが変わりました");
		};
    });

iphoneでOK!
Androidでは・・・、うーん、最新のは、対応していますが、
古いものでは、どうやら対応していないみたいです。(Android2.1から前は非対応かと)

古いのは切り捨てる！
ということであればこれでも良いんですが、
そうもいかなかったので、違う方法を探しました。

そして、見つけたのが、
onresizeイベントを使用するというもの。
見た瞬間、「これでいけるじゃん！なんで気づかなかったんだろう」とハッとしました。

$(document).ready(function(){
        	window.onresize = function(){
			alert("向きが変わりました");
		};
    });

これで、古いAndroidもOK!
もちろんiphoneもOK！

なんとか解決できました。

これだと横向きか縦向きかを判別できるわけではありません。

判別させたい場合は、
以下のサイトをご覧ください。

また以下のサイトも参考に挿せていただきました！
Androidブラウザ+JSで傾きイベントを取得する | blog.wpe

他にスマートフォン制作で参考になりそうなサイトもご紹介します。

今後よく利用することになりそうです。

web-trigger