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

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");
	}
	});
});

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