この記事は2012年に作成されたものです。内容が古くなっている可能性があります。
【2013/06/17追記】こちらの記事もあわせてどうぞ。
target-densitydpi=device-dpi に注意【viewport】
スマホサイトを作る際は、viewportの設定を行なわないと、デフォルトの横幅980pxで設定してしまうので注意、とのことだったので、いろんなサイトが良く設定している
[HTML]
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
[/HTML]
を設定してみました。
しかし、FirefoxのFireMobileSimulatorで一通り整えて、実記テストしてみたところ、おかしな点が出てくる出てくる。
まず、ズーム（ピンチイン・ピンチアウト）が効かない。
これは「minimum-scale」と「maximum-scale」と「user-scalable」をしっかり設定しないとダメみたいです。
「minimum-scale」はデフォルトのスケールである「initial-scale」にあわせればいいとして、「maximum-scale」は「minimum-scale」よりも大きい値にし、「user-scalable」は「yes」にします。
[HTML]
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes" />
[/HTML]
そもそも「minimum-scale」「maximum-scale」「user-scalable」は設定しない（記述しない）と言うのもありです。ちなみにこの設定は一部機種には全く効かない（つまりuser-scalableがnoでもズームできてしまう）場合があります。機種に依存してしまうので深く考えないほうがいいかもですね。
続いて、「device-width」の値。
iphone3Gは幅320pxですが、iphone4からは640pxになるはず。
しかし、「width=device-width」の設定ではiphone4だろうが4Sだろうが、第４世代のipod touchだろうが幅のサイズは320pxになります。（こう書くと誤解を生みそうな感じですが、もちろん画面の半分しか表示されないわけではなく、320pxのサイズのものが640pxに引き伸ばされて表示されるという感じになります。）
しかも、幅480あるはずのXperiaでさえ320pxになってしまう・・・
よくよく調べてみると、幅320pxでサイトを作れば、大体の機種に合うようにできているそうです（例外はもちろんありますが）
Androidケータイの場合は、１つの機種で解像度が３種類に分かれており、通常はミドルの解像度で表示されているとのこと。
参考サイト：
幅のサイズをきっちり、機種の解像度に合わせたい場合は（ただしiphone除く）、さらに「target-densitydpi=high-dpi」を足しましょう。
【８月16日追記】「target-densitydpi=high-dpi」の場合、Andoroid タブレットなどで表示がおかしくなる可能性があります（※１）。「target-densitydpi=device-dpi」としたほうが良いようです。
[HTML]
<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
[/HTML]
通常はこの「target-densitydpi」は「medium-dpi」となっています。
（）書きでも触れましたが、これはAndroid向けなので、iphoneでは効きませんので注意！
「initial-scale」を0.5にしたりすると、640pxで表示されるようになるので、iphone4・4Sの場合は
[HTML]
<meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no" />
[/HTML]
を記述する、というように振り分けられれば良いのですが、3Gとの振り分け方がイマイチよくわからない・・・
というわけで、現在まだまだ模索中です。
※１：具体的には短辺800pxのタブレットで表示した際、画面の３分の２くらいのサイズでしか表示されませんでした。（機種や設定などによるかもしれませんが。）
【2013/06/17追記】こちらの記事もあわせてどうぞ。
target-densitydpi=device-dpi に注意【viewport】