iPhone向けページへの最適化

html編集するにあたって、iPhone向けに最適化されたページ幅とかのお話。

headタグ内に

<meta name="viewport" content="width=320; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0;" />

を記述するだけ。

viewport属性はwindowの解像度を指定できる。
仮想ウィンドウを生成するイメージ。

content属性で指定する値は以下の通り。

プロパティ	値		初期値
width (表示領域の幅)	数値	ピクセル数 （200～10000）	980
	device-width	端末画面の幅に合わせる
height (表示領域の高さ)	数値	ピクセル数 （233～10000）	自動
	device-height	端末画面の高さに合わせる
minimum-scale (最小倍率)	数値	倍率 （0～10 の範囲、初期値は 0.25）	0.25
maximum-scale (最大倍率)	数値	倍率（0～10 の範囲、初期値は 1.6）	1.6
initial-scale (初期のズーム倍率)	数値	倍率 （minimum-scale～maximum-scale）
user-scalable (ズームの操作)	yes/no	許可する / しない	yes