meta viewportは、デバイスに応じてウィンドウの幅や高さを調整できたり、画面を拡大縮小率を調整したりと、表示領域を設定する上で重要なメタデータです。
特に、スマートホンやiPad などのタブレット向けにサイトを構築したり最適化する際に<head>内にmeta viewportを設定しておかないと上手く収まってくれません。
meta viewportの記述例
以下のように<head>内に指定します。|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> |
meta viewportの属性
content に指定する値はサイトに応じて調整します。| width | ピクセルで指定。初期値は 980px。device-width で、デバイスの横幅に合わせる。 |
|---|---|
| height | ピクセルで指定。初期値は auto。device-heightで、デバイスの高さに合わせる。 |
| initial-scale | ページ読み込み時の拡大率の指定。初期値は 1。 |
| minimum-scale | 拡大率の最小値。初期値は 0.25。 |
| maximum-scale | 拡大率の最大値。初期値は 1 .6。 |
| user-scalable | 拡大操作（ピンチイン/ピンチアウト）の許可。 初期値は yes。拡大操作を許可しない場合は no。 |
コメント