【Android】【iPhone】viewport
久しぶりにスマホページのコーディング依頼があったので
JavaScriptのお勉強を一旦お休みしてSPページ関連のメモをかくよ
今更だけどちゃんと調べたのでviewport
viewportとは
- ウィンドウのサイズのようなもの
- 初期値は横幅980pxに指定されている
- ちなみにiPhoneの横幅は320px、約3倍の幅が指定されてる
- この初期値が指定されているからPCページをスマホで見ると縮小された状態で表示される
ふむふむ、なるほどですね
viewportの指定方法
metaタグで指定する
例
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
| プロパティ | 説明 | 初期値 | 許容範囲 | 備考 |
|---|---|---|---|---|
| width | デバイスの横幅 | 980px | 200～10,000px | device-width(デバイスの横幅に合わせる)の指定が可能 |
| height | デバイスの縦幅 | 横幅とアスペクト比から計算される値 | 200～10,000px | device-height(デバイスの縦幅に合わせる)の指定が可能 |
| initial-scale | ページが最初に読み込まれた時の拡大率 | 表示範囲から計算される値 | minimum-scale～maximum-scale | 乗数で指定(例：120%の場合は1.2) |
| minimum-scale | 拡大率の下限 | 0.25 | 0～10 | 乗数で指定 |
| maximum-scale | 拡大率の上限 | 1.6 | 0～10 | 乗数で指定 |
| user-scalable | ユーザーに拡大縮小を許可するか | yes | yes or no | no（拡大縮小不可）にすることでフォーム入力時のスクロールも不可 |
結局どう設定したらいいの？
端末の横幅を最大限に活かすべきなので
特に理由が無ければ大抵の場合は、viewportはdevice-widthに指定
縮小拡大はできないようにしてあるのが普通
あとは臨機応変に
注意点
仕様に関して詳しく検証しているサイトを見つけたので
貼っておくます
http://ipn3g.com/web/study3.html
以下引用
- コンテンツより小さいviewport width/heightを設定すると無視される
- viewportでinitial-scaleを設定せずにwidth/heightを設定すると全画面表示となる
- viewportでinitial-scaleもwidth/heightも設定しないとwidth=980px/height=1091pxとなる
- 表示域とコンテンツのサイズが一致しない場合にinitial-scaleを設定すると、意図しないレイアウトが発生することがある
