Media Queriesを使えばスタイルシートだけでスマホに対応できます。
(賛否両論あるようですが…)

あちらこちらのサイトを参考に

@media only screen and (max-width: 480px) {...}
@media only screen and (max-width: 320px) {...}

などと記述して、iPhoneで動作確認し、これはなかなかおもしろいなと思っていました。
ところが最後に確認した新しめのAndoroidで見ると、画面に収まらず右にはみ出ています。
もちろん手でタップとかピンチインすれば合わせられますが、やはり開いた時から
画面に合わせたい所です。

さんざん悩んで調べて分かったことは、

  • そのAndroidのピクセル数は、横720ピクセル、縦1280ピクセル。
  • サイトを見る時は横360ピクセルで動作している。
  • 作ったサイトには<meta name="viewport" content="width=device-width, initial-scale=1.0">をmetaタグに記述している。
  • よって、そのAndroidでサイトを見ると、「@media only screen and (max-width: 480px) {...}」は有効だが、「@media only screen and (max-width: 320px) {...}」は有効にならないので表示する内容は480ピクセルとなる。しかしブラウザは横360ピクセルで、しかもinitial-scale=1.0(初期の拡大率。この場合100%)なので、当然右側に120ピクセル分(480-360)はみ出る。

ということでした。

結果的に

@media only screen and (max-width: 320px) {...}

@media only screen and (max-width: 360px) {...}

にして、360ピクセルでも大丈夫なように微調整しました。

どこのサイトを見ても当たり前のように、480ピクセルと320ピクセルで例を書いてるし、360ピクセルで動作してることになかなか気づかなかった…。



表示幅を確認するJavascript

<script>
document.write(screen.width);
</script>

devicePixelRatioは

<script>
document.write(window.devicePixelRatio);
</script>

で調べられます。


(2013-07-18 追加)

古いデータですが、Android端末のdevicePixelRatio - to-Rに解像度とdevicePixelRatioの一覧があります。

めぼしい所をまとめてみました。

iPhone4以降だと液晶の幅(狭い方)は640pxあるのですが、devicePixelRatioが2なので、

640/2=320

ブラウザは幅320pxとして振舞うと言うことです。

Androidの皆さんは360pxと想定しておけば良さそうです。

表には入れてませんが、初期の物には400とか480pxの機種がありますが、古いので見なかったことに…

実際の幅(px)devicePixelRatio表示幅(px)備考
6402320iPhone4~
4801.5320
5401.5360
7202360
108033601920x1080