スマートフォン対応縦横判別

ホームページでスマートフォン対応するのに、縦横どちらで表示しているか判別して、画面を変更する処理が必要になります。

そこで、判別に必要な処理を調べてみました。

 ①window.orientationを使う
【JavaScriptコード】
ユーザエージェント(userAgent)でiPhoneかiPad,Androidかを調べてorientation の方向(0とか90とかの数字が取得)で、クラスを
追加して画面変更を行います。

var isLandscape = function(){

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1)

          || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {

var orientation = window.orientation;

if(orientation == 90){

 　　　　　　　　　　　SetViewHorizontal();

}else{

SetViewVertical();

}

}

}

$(window).resize(function(){

isLandscape();

});

isLandscape();

 function SetViewVertical()
{
// 縦処理
}
 function SetViewHorizontal()
{
// 横処理
}


②縦横サイズから判断
 【JavaScriptコード】
（①だとPCでは判別できないので、縦横で判別した方がいいかもしれません）
windowのサイズを取得して、縦幅が横幅よりも大きかったらportrait（縦向き）
横幅が縦幅よりも大きかったらlandscape（横向き）
という判別

var isLandscape = function(){

if (window.innerHeight > window.innerWidth) {

　　　　　　　SetViewVertical();

}else{

　　　　　　　SetViewHorizontal();

}

}

$(window).resize(function(){

isLandscape();

});

isLandscape();
 function SetViewVertical()
{
// 縦処理
}
 function SetViewHorizontal()
{
// 横処理
}

③JQueryを使用
jQueryのイベントで、orientationchangeというイベントを使用する

$(document).ready(function(){

            window.onorientationchange = function(){

            alert("向きが変わりました");

        };

    });

【参考URL】
 http://blog.livedoor.jp/tacshock-code14/archives/6498961.html
http://blog.alan-trigger.info/?p=235
http://www.webcreatorbox.com/tech/smartphone-snippets/
http://weboook.blog22.fc2.com/blog-entry-299.html