5月 172012
 
このエントリーをはてなブックマークに追加
はてなブックマーク - スマートフォン画像解像度について
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Post to Google Buzz
Bookmark this on FC2 Bookmark
Share on FriendFeed

 

【 主なスマートフォン機種の画像解像度 】

 

 機種名  キャリア 画像解像度
 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を利用して作られたサイトは、どのスマフォでも適切なサイズで表示されるようになる。

 

 


 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree

Get Adobe Flash player