続:Androidブラウザでviewportのwidth指定

1年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、1年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。

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/320 );
	}else{
		if(/Android/.test(window.navigator.userAgent)){
			if(!landscapeWidth)landscapeWidth=$(window).width();
		}else{
			landscapeWidth=$(window).width();
		}
		$("html").css("zoom" , landscapeWidth/320 );
	}
}).trigger("resize");

こんな感じにするとほとんどのスマートフォンで横幅320pxに表示することができます。

サンプル

1点 Facebookのいいねボタンが設置されているサイトでは上記のスクリプトでも表示がおかしくなります(いいねボタンがresizeイベントでviewportをいじっている為)。そういった場合はいいねボタンをiframeモードで設置するとちゃんと動作するようになります。

関連エントリー

スマートフォンサイトをデザインする上で知っておくべき10のTIPS
Android2.2 とtransformのバグ
スマートフォンとposition:fixedのバグ
AndroidとjQueryのスライドアニメーションの不具合
Androidのposition:absoluteとフォームの問題

スポンサードリンク

«2011年のto-R人気エントリーTOP20 | メイン | CSS Nite ベスト・セッション2011 でベスト10セッションに選ばれました»