Webサイトをスマートフォン用に最適化して表示するために、Webページの幅をスマートフォンの画面幅にしたい場合があります。
Viewportの宣言をすることで、Webページの幅をスマートフォンの画面幅と合わせることができます。
以下のタグをHEADタグ内に記述します。
<meta name="viewport" content="width=device-width, initial-scale=(初期状態のスケール値), maximum-scale=(最大スケール値), user-scalable=(拡大縮小ができるか)" />
<meta name="viewport" content="width=device-width, initial-scale=(初期状態のスケール値), maximum-scale=(最大スケール値), minimum-scale=(最大スケール値), user-scalable=(拡大縮小ができるか)" />
| 属性 | 値の範囲 | 意味 |
|---|---|---|
| initial-scale | 0.1から10まで | 初期状態の拡大倍率の数値 |
| maximum-scale | 0.1から10まで | 拡大可能な場合の最大倍率の数値 |
| minimum-scale | 0.1から10まで | 拡大可能な場合の最小倍率の数値 |
| user-scalable | yes or no | 拡大縮小操作が可能か |
user-scalableには以下の値を指定できます。
| 値 | 意味 |
|---|---|
| yes | ズームイン、ズームアウトできる |
| no | ズームイン、ズームアウトできない |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
<title>テストページ</title>
</head>
<body>
<p>スマートフォン対応ページ</p>
</body>
</html>
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>テストページ</title>
</head>
<body>
<h1>テストページ - ViewPort設定なし</h1>
<p>文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言</p>
<p>文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言</p>
<h2>見出しです。</h2>
<p>文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言</p>
</body>
</html>
上記のHTMLページをWebブラウザで表示します。下図のページが表示されます。
スマートフォンのシミュレーターで表示した場合が下図です。文字の表示がかなり小さいです。
続いて、以下のHTMLファイルを作成します。metaタグで viewportの設定を追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
<title>テストページ</title>
</head>
<body>
<h1>テストページ - ViewPort設定あり</h1>
<p>文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言</p>
<p>文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言</p>
<h2>見出しです。</h2>
<p>文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言文言</p>
</body>
</html>
上記のHTMLページをWebブラウザで表示します。下図のページが表示されます。
PCのWebブラウザの表示では、viewportの設定が無い場合と表示に違いはありません。
スマートフォンのシミュレーターで表示した場合が下図です。viewportの設定が無い場合より、文字のサイズが大きくなり、
スマートフォンで見やすい表示サイズでページが表示されます。
