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" />
<meta name="viewport" content="width=device-width" />
検証端末:iPhone4、iPhone3G
「iPhone専用サイト」であればこの方法だけで問題ないと思います。
<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 003SH、au 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はもはやガラパゴスすぎて怖いので、やはりリキッド対応のデザインをしていただき、無理に拡大しないほうがみんな幸せなんじゃないかと思ってます。