スマホサイトを作っていて、縦向きのときにしか見れないようにしたい、ということがあり、縦横を判定するjavascriptを探していたら2つの方法がありました。


①window.orientationを使う方法

以下のようにします。

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 == 0){
$("body").addClass("portrait");
$("body").removeClass("landscape");
}else{
$("body").addClass("landscape");
$("body").removeClass("portrait");
}
}
}
$(window).resize(function(){
isLandscape();
});
isLandscape();



navigator.userAgentなんちゃらーというところは、ユーザーエージェントを見て、iphoneなのかandroidなのかを判別してるだけです。

肝心なのは、var orientation = window.orientationから先。

window.orientationというのは、傾き度数を取得するもので、iphoneを横にしたり縦にしたりすると、0とか90とかの数字が入ってきます。

なので0が入ってきたときは、bodyタグにclass="portrait" とつけて、それ以外が入ったときは
<body class="landscape">になるようにします。

あとは、css側で

.landscape #content{display:none;}

とかなんとかやっちゃうなどします。

しかし、このほうほう、たまに縦横が逆転しちゃうバグがおきます。
僕の書き方が悪いのかもしれません。

そこでもっとシンプルなのが次の方法




②縦横サイズから判断しちゃう方法

var isLandscape = function(){
if (window.innerHeight > window.innerWidth) {
$("body").addClass("portrait");
$("body").removeClass("landscape");
}else{
$("body").addClass("landscape");
$("body").removeClass("portrait");
}
}
$(window).resize(function(){
isLandscape();
});
isLandscape(); 


これはわかりやすいです。
windowのサイズを取得して、縦幅が横幅よりも大きかったらportrait(縦向き)
横幅が縦幅よりも大きかったらlandscape(横向き)
という判別。

こっちのほうが間違いないかもです。