【iPhone用サイト】横幅をiPhoneの画面に合わせる

2011年8月19日 12:26 AM

iPhone用のサイトではなくても、携帯用サイトをiPhone用として表示してるサイトも多いです。

ただ、その場合、横幅が合わなく、標準ではとても画面が小さく表示されてしまいます。

横幅をiPhone用に合わせたい場合は、以下の一行をヘッダーに追加します。

もちろん、Androidもこれで対応できます。

<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0″ />

widthには表示領域を指定することができます。直接数字を「width=980」のように入力するか、device-widthと指定します。
device-widthにすれば「portrait(縦モード)」「landscape(横モード)」問わず、横幅320pxになります。

initial-scaleは初期表示の倍率です。

例えばinitial-scale=2.0とした場合、widthが320pxであれば、2倍にズームされた状態になるので、画面には横幅160pxの内容が表示されることになります。

user-scalableはユーザーによる拡大・縮小の操作を強化するかどうかです。
値はyesかnoかいずれかの指定になります。

maximum-scaleは拡大を許可した場合の最大倍率となります。

基本的にはiPhone向けにちょうどいいサイト幅で閲覧できるようwidth=device-widthのみ指定すると良い。

<meta name=”viewport” content=”width=device-width” />

カテゴリー：iPhone, Tips ： コメント（0）