続: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セッションに選ばれました»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/704
コメント

すごい!助かりました!ありがとうございます!

投稿者:通りすがり | 2014年2月21日 15:22

本当に助かりました。
ありがとうございました!!

投稿者:通りすがり | 2014年6月11日 10:32
コメントを投稿