【 主なスマートフォン機種の画像解像度 】
| 機種名 | キャリア | 画像解像度 |
| GALAXY S Ⅱ LTE SC-03D | docomo | 480 x 800 ピクセル |
| Xperia SO-01B | docomo | 480 x 850 ピクセル |
| Xperia SO-02D | docomo | 720 x 1280 ピクセル |
| AQUOS PHONE IS14SH | au | 540 x 960 ピクセル |
| iida INFOBAR A01 | au | 540 x 960 ピクセル |
| iPhone 3GS | SoftBank | 320 x 480 ピクセル |
| iPhone 4 / 4S | SoftBank、au | 640 x 960 ピクセル |
【 Viewportと画像解像度の違い 】
ViewPortとは、コンテンツ表示領域のこと。ステータスバー、コントロールボタンを覗いた画像領域を指す。
必ずしも画像解像度＝ViewPort ではない。
例としてiPhone 4 を紹介。
iPhone 4の画面解像度は、640ピクセル。
iPhoneのViewPortのデフォルト値は、980ピクセル。
ここに、幅320ピクセルの画像が入ったHTMLを表示すると、横幅の1／3 に画像が表示される。
もちろん、ViewPortの設定値が320ピクセルだったら、画面いっぱいに画像は表示される。
これは、iPhoneの標準ブラウザである、Mobile SafariのViewPortの幅が980ピクセルの為。
jQuery Mobileを用いてスマフォ向けサイトを作る時は、次のような指定をすること。
<meta name="viewport" content="width=device-width, initial-scale=1">
上記コードの意味は、幅をデバイス幅にする、初期拡大率を1にする。この設定をしておけば、jQuery Mobileを利用して作られたサイトは、どのスマフォでも適切なサイズで表示されるようになる。
