5月 172012
 

 

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

 

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

 

 


5月 112012
 
現在あるPC版のホームページをスマートフォンに対応させる為には、どうするのが一番手っ取り早いか?
いろいろ調べてみると、jQuery Mobileが一番良さそう。 簡単にだが特徴をまとめてみた。

Get Adobe Flash player