スマートフォン用ページのコーディングをする際に毎回悩まされるのが、横に傾けたときの表示の仕方。

Javascriptなども複雑になってくるとここはリキッドにしてここはサイズ固定で…なんて悩むことが多いと思います。

そんな悩みを一気に解消してくれる方法がこちら。

ソース

var _psd_width = 640; //支給されたpsdの横幅を入力
function userAgentCheck() {
	var ua=navigator.userAgent;
	for(i=0;i<arguments.length;i++)
	if(navigator.userAgent.indexOf(arguments[i])>-1)
	return true;
	return false;
}
var portraitWidth,landscapeWidth;
$(window).bind("resize", function(){
	if(Math.abs(window.orientation) === 0){
		if(/Android/.test(window.navigator.userAgent)){
			if(!portraitWidth)portraitWidth=$(window).width();
		}else{
			portraitWidth=$(window).width();
		}
		$("html").css("zoom" , portraitWidth/_psd_width );
	}else{
		if(/Android/.test(window.navigator.userAgent)){
			if(!landscapeWidth)landscapeWidth=$(window).width();
		}else{
			landscapeWidth=$(window).width();
		}
		$("html").css("zoom" , landscapeWidth/_psd_width );
	}
}).trigger("resize");

Javascriptで強引にzoomをつかってページ全体を拡大させています。
これを使うことでcssで画像サイズを半分にしたり、マージンを半分にしたりという手間がなくなります。
ただし、この方法はzoomが使えないfirefoxのモバイルブラウザやOpera miniでは使えませんでした。（Opera Mobileは使用可能）
また、一部コーディングの仕方によっては崩れが発生しかねないので、使用には注意がひつようです。
対応させるブラウザによって使い分けた方がよさげですね。