2013年8月22日

[スマホサイト]Android端末でも横向きで拡大表示

スマートフォンサイトを作成する際、横向きの動作としては大きく二つに分かれます。一つは横向きでも文字や写真の大きさが”変わらない”動作、もう一つは横向きにした時に文字や写真の大きさが”変わる”動作。この後者の「横向きで拡大表示になる」動作、iPhoneや最近のAndroidなら、viewportを下記の通り書いておけば再現出来ます。

 

ただ困った事に、これだけだと一部のAndroid端末では横向きにしても文字や写真の大きさが変わりません。この現象はHTML側だけでは制御できないのですが、javascriptを使用する事でこれらのAndroidも同じ動作にする事ができます。下記はAndroidにのみ適用する書き方としています。

$(window).on('resize load', function(){
	if(navigator.userAgent.search(/Android/) != -1) {
		$("html").css("zoom" , $(window).width()/320 );
	}
});

横向きで拡大となるスマートフォンサイトを作成する場合は是非お試し下さい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です