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

スマートフォン(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!

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

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

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

 

jQueryでiPhone/iPadの向きを検出する[to-R]

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

 

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

 

少しのコードで実装可能な15のスマートフォンサイト用小技集 | Webクリエイターボックス

初めてスマートフォン専用ページを作成する際に知っておきたいポイント

 

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