Jul. 7th,2020
＃
“name="viewport"”
“name="viewport"”が指定された“meta”要素はモバイルブラウザ向けのビューポートの大きさの設定を表します。
サンプルコード
<meta name="viewport" content="width=device-width, initial-scale=1">
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| name="" | メタデータの名前 | viewport | ビューポートの大きさの設定 |
| content="" | メタデータの値 | ビューポートの大きさの設定 | ビューポートの大きさの設定 |
| 任意属性 | |||
| グローバル属性 | |||
“content”属性の値
“content”属性の値はプロパティとコロン(“:”)に続いて記述される値として指定します。
“content”属性の値はコンマ(“,”)で区切ることで複数指定することができます。
| プロパティ | 設定可能な値 | ||
|---|---|---|---|
| プロパティ | 説明 | 値 | 説明 |
| width | ビューポートの横幅を指定 | device-width | ビューポートの横幅はデバイスの描画域の横幅 |
| 数値 | ビューポートの横幅のピクセル数 | ||
| height | ビューポートの高さを指定 | device-height | ビューポートの高さはデバイスの描画域の高さ |
| 数値 | ビューポートの高さのピクセル数 | ||
| initial-scale | ズームの初期倍率を指定 | 数値 | “0.0”から“10.0”までの数値 |
| maximum-scale | ズームの最大倍率を指定 | 数値 | “0.0”から“10.0”までの数値 |
| minimum-scale | ズームの最小倍率を指定 | 数値 | “0.0”から“10.0”までの数値 |
| user-scalable | ズームできるかを指定 | yes | ユーザーがズームできる |
| no | ユーザーがズームできない | ||
値はコンマ(“,”)で区切ることで複数指定することができます。
スマートフォンなどのモバイル端末向けの設定であり、通常デスクトップブラウザでは“name="viewport"”を指定した“meta”要素は無視されます。
＃
