スマートフォンのサイトを横に回転させた時に画面のサイズに合わせて拡大させるには

2013年1月26日追記
時代の移り変わりとともに、このソースでは対応できなくなっているので
続:Androidブラウザでviewportのwidth指定[to-R]
こちらのやり方がいいと思います!

スマートフォンサンプル画像:縦
これを横に回転させて、

スマートフォンサンプル画像:横
画面幅に合わせて拡大したい。

これ、見にくくないのかな...と個人的には思うんですが、そういう依頼がちらほら来るのでまとめてみました。

サンプルページ

QRコード
http://sakaki0214.com/sample/110605/

通常(横にしても拡大しない)

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />

iPhone用(横にすると拡大する)

<meta name="viewport" content="width=device-width" />

検証端末:iPhone4iPhone3G

「iPhone専用サイト」であればこの方法だけで問題ないと思います。

iPhone+Android用(横にすると拡大する)

<meta name="viewport" content="width=device-width" />
<script src="shared/js/jquery-1.3.2.js"></script>
<script>
$(window).bind('resize load', function(){
	$("html").css("zoom" , $(window).width()/320 );
});
</script>

検証端末:docomo GalaxyS
※追記:GALAPAGOS SoftBank 003SHau IS03でも問題なし

参考サイト:
Androidブラウザでviewportのwidth指定[to-R]

上記エントリーを参考に、JSでviewportのwidthを320にしました。

"meta要素で「content="width"」を指定せず"とあったんですが、以前組んだサイトでそれをとったら横スクロールバーが出たんです。ちなみに、このサンプルページではcontent="width"があっても無くても横スクロールバーはでませんでした。

AndroidだけでなくiPhoneも、ということであればcontent="width"がないとiPhoneの表示に問題(画面の横幅が980pxになる)がでてくるのでcontent="width"は必須です。
なので、content=width"が入っていることが原因でAndroidの表示がおかしくなった場合は...iPhoneとAndroidでソースを分けないと実現不可です。

最後に

一応なんとか1ソースでiPhoneもAndroidも対応できた気がするのですが、ものすごーく不安です。

AndroidのGalaxyS以外の表示が気になるところです。Xperia専用サイトで以前使用したソースなのでたぶんXperiaは大丈夫だと思うのですが...。
Androidはもはやガラパゴスすぎて怖いので、やはりリキッド対応のデザインをしていただき、無理に拡大しないほうがみんな幸せなんじゃないかと思ってます。

トラックバックURL

コメントする


匿名でも本名でもなんでも。


公開されません。


ブログやホームページなどありましたら。


コメントは承認制となっております。公開までしばらくお待ちくださいませ。

サイト内検索
モバイルサイト
これからゆっくり考L:QRコード

このページのトップへ