スマートフォン向けサイトのサイズや画像について
iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。
まずスマートフォン向けサイトを作成する際に最初に気になる点は横幅や画像の扱いだったりするとおもいます。
まず横幅ですが、縦向きで320px～640pxとなります。横向きで480px～960pxとなります。
解像度は機種によって様々ですが、大方縦横320px/480pxが標準となります。
※iPhone4は640px/960pxの解像度ですが、Safariの内部CSSで320px/480pxと解釈してくれるため。
ですので、デザインカンプなどを作成する際も縦を標準とする際は320pxで作成すれば問題ないといえます。
ただし、横向きにも対応しようとするのであれば、極力CSS3の角丸やグラデーション、ドロップシャドウなどを利用したリキッドレイアウトのデザインにするのがベターをいえます。
横幅一杯を使うメイン画像などはPNGをうまく使って背景をリピート画像で用意しておくなどのテクニックが有効になります。
==========================================================================
スマートフォン独自の仕様 viewportについて
viewportの各プロパティ
width(幅)
可視領域の幅。デフォルト値は980px。
200pxから10000pxまでの範囲を指定できる。
height（高さ）
高さ。デフォルト値はwidthの値とデバイスのアスペクト比から算出される。
233pxから10000pxまでの範囲を指定できる。
initial-scale（ズームの詳細設定）
ページが可視領域内にフィットするように計算された値がデフォルト値となる。
minimum-scaleからmaximum-scaleによって定義された範囲の値が指定できる。
最初にページが表示されるviewportの値のみが指定可能。
user-scalableにnoを指定していなければズーム操作が可能になる。
ズームの範囲はminimum-scaleとmaximum-scaleの範囲内に制限される。
minimum-scale（最小縮小比率）
viewportの最小scale値。
デフォルト値は0.25。
0から10.0までの範囲を指定できる。
maximum-scale（最小拡大比率）
viewportの最大scale値。
デフォルト値は1.6。
0から10.0までの範囲を指定できる。
user-scalable（ズームの有無設定）
ユーザーがズーム操作できるかどうかをyesとnoで指定する。
デフォルト値はyes。
noを指定するとテキスト入力フィールド内でのスクロールも制限される。
解像度や画像表示比率について
携帯サイトでVGAとQVGAでディスプレイの解像度が違うので画像サイズを比率の数値で出力を制御するツールなどがありますが、iPhone3G-3GS1（480×320ドット）とiPhone4（960×640ドット）では4倍の解像度の違いがあります。また、Android端末も機種によって解像度は異なります。iPhoneやAndroidのWebKit系のブラウザはdevicePixelRatioというプロパティが定義されているようです。この要素の値によって画像の1pxが何pxで表示されるかを知る事ができます。
==========================================================================
ＨＴＭＬ5 ＋ ＣＳＳ3
また勉強し直しですが頑張りましょう。
まずスマートフォン向けサイトを作成する際に最初に気になる点は横幅や画像の扱いだったりするとおもいます。
まず横幅ですが、縦向きで320px～640pxとなります。横向きで480px～960pxとなります。
解像度は機種によって様々ですが、大方縦横320px/480pxが標準となります。
※iPhone4は640px/960pxの解像度ですが、Safariの内部CSSで320px/480pxと解釈してくれるため。
ですので、デザインカンプなどを作成する際も縦を標準とする際は320pxで作成すれば問題ないといえます。
ただし、横向きにも対応しようとするのであれば、極力CSS3の角丸やグラデーション、ドロップシャドウなどを利用したリキッドレイアウトのデザインにするのがベターをいえます。
横幅一杯を使うメイン画像などはPNGをうまく使って背景をリピート画像で用意しておくなどのテクニックが有効になります。
==========================================================================
スマートフォン独自の仕様 viewportについて
viewportの各プロパティ
width(幅)
可視領域の幅。デフォルト値は980px。
200pxから10000pxまでの範囲を指定できる。
height（高さ）
高さ。デフォルト値はwidthの値とデバイスのアスペクト比から算出される。
233pxから10000pxまでの範囲を指定できる。
initial-scale（ズームの詳細設定）
ページが可視領域内にフィットするように計算された値がデフォルト値となる。
minimum-scaleからmaximum-scaleによって定義された範囲の値が指定できる。
最初にページが表示されるviewportの値のみが指定可能。
user-scalableにnoを指定していなければズーム操作が可能になる。
ズームの範囲はminimum-scaleとmaximum-scaleの範囲内に制限される。
minimum-scale（最小縮小比率）
viewportの最小scale値。
デフォルト値は0.25。
0から10.0までの範囲を指定できる。
maximum-scale（最小拡大比率）
viewportの最大scale値。
デフォルト値は1.6。
0から10.0までの範囲を指定できる。
user-scalable（ズームの有無設定）
ユーザーがズーム操作できるかどうかをyesとnoで指定する。
デフォルト値はyes。
noを指定するとテキスト入力フィールド内でのスクロールも制限される。
解像度や画像表示比率について
携帯サイトでVGAとQVGAでディスプレイの解像度が違うので画像サイズを比率の数値で出力を制御するツールなどがありますが、iPhone3G-3GS1（480×320ドット）とiPhone4（960×640ドット）では4倍の解像度の違いがあります。また、Android端末も機種によって解像度は異なります。iPhoneやAndroidのWebKit系のブラウザはdevicePixelRatioというプロパティが定義されているようです。この要素の値によって画像の1pxが何pxで表示されるかを知る事ができます。
==========================================================================
ＨＴＭＬ5 ＋ ＣＳＳ3
また勉強し直しですが頑張りましょう。