iPhone/Android等モバイル版webkitで縦持ち(portrait)横持ち(landscape)のcssを切り替えたい

jQuery


iPhone/AndroidではJavaScriptのwindow.orientation;を取得できる。

jQueryスタイルでの記述方法を用いると、下記のような大変シンプルなコードでデバイスの縦持ち（portrait）と横持ち(landscape)でcssの切り替えが実装可能である。



function switchOrientation(){

var orientation = window.orientation;

if(orientation == 0){

$("body").addClass("portrait");

$("body").removeClass("landscape");

}else{

$("body").addClass("landscape");

$("body").removeClass("portrait");

}

}

$(document).ready(function(){

switchOrientation();

var agent = navigator.userAgent;

if(agent.search(/iPhone/) != -1){

window.onorientationchange = switchOrientation;

}else{

window.onresize = switchOrientation;

}

});

上記の記述でbodyタグに縦持ちの時はclass=”portrait”が、横持ちの時class=”landscape”が付加される。

あとはcssでportrait時/landscape時それぞれの値を指定すればよい。



.portrait div#contents	{

//ここに縦持ち(portrait)のときのスタイルを記入　例)width:452px;

}

.landscape div#contents {

//ここに横持ち(landscape)のときのスタイルを記入　例)width:687px;

}

jQueryのキャッチコピー”The Write Less, Do More（より少ない記述で、より多くのことを）”を体現するような、シンプルなコードとなった。

(追記2011.5.9)

■Android2.3での不具合について

Android 2.3とiPhoneのブラウザでは、window.onresizeがコールされ、

window.onorientationchangeはコールされない。

2.2以下では、window.onorientationchangeがコールされる。

そのため、Android2.3に対応するためには上記の条件分岐を書き換える必要がある。

ということは、つまり、こんなコードでいいのではないか？！



$(function(){

$(window).resize(function(){

var orientation = window.orientation;

if(orientation == 0){

$("body").addClass("portrait");

$("body").removeClass("landscape");

}else{

$("body").addClass("landscape");

$("body").removeClass("portrait");

}

});

});

全機種検証などはしていないけど、いかがでしょう。