Blogブログ

TORAT | 2013.4.6

htmlをiPhoneに対応させる

  • html

・縦:portlaitモード（320px）約1/3
・横:landscapeモード（480px）約1/2

（1）metaタグにviewportを使う

<meta name=”viewport” content=”[プロパティ]=[値](, [プロパティ]=[値])”>

initial-scale 倍率の初期値 乗数で指定（例：120%の場合は1.2）
minimum-scale 倍率の最小値 乗数で指定
maximum-scale 倍率の最大値 乗数で指定
user-scalable 拡大縮小の可否 （ye/no）

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

デバイスにあわせる（スクロール分の余白ができてしまう）

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

iPhone用

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

ベスト

<meta name=”viewport” width=”480, user-scalable=no, maximum-scale=0.6667“ />

作りこんだ通りのサイズで、そのまま表示させたい場合

この記事を書いた人

TORAT 管理者

関連記事

ブログ一覧へ

Recommend愛されているブログ