viewport(ビューポート)の設定について

レスポンシブサイトなどマルチデバイス対応に必須なviewportの設定について解説します。

この記事のポイント

マルチデバイス対応で定番のviewportの設定が分かる
viewportで設定できる項目を知る

viewport(ビューポート)の設定

1つのHTMLで様々な画面サイズ、解像度のデバイスに対応するレスポンシブ対応の際などに必ず使うmeta要素のviewport。
今回はこのviewportについて、よく使う設定例や設定できる項目を解説していきます。

viewportの設定例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>viewportの設定について</title>

... 途中省略 ...
</head>
<body>
... 途中省略 ...
</body>
</html>

よく使うviewportの設定例

次のviewport設定は、レスポンシブ対応サイトでよく使われる設定例です。

viewportの設定例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>viewportの設定について</title>

... 途中省略 ...
</head>
<body>
... 途中省略 ...
</body>
</html>

こちらを指定すると、次のようにHTMLを表示するデバイスの表示幅が異なっていても自動的に幅が調整されます。

PCでの表示例

スマホでの表示例

meta要素の基本的な書式として、name属性に「viewport」、content属性に設定を記述する形になります。

ここではコンテンツの表示領域を指定するwidthと、表示のズーム倍率を指定するinitial-scaleの2つを設定しています。

「width=devide-width」は「480」など具体的な数値を入力するか、自動的にデバイスの表示幅が入る「device-width」を指定します。
基本的には「device-width」を指定する形で大丈夫です。

「initial-scale=1.0」はズーム倍率を等倍にしています。
ここに「0.5」を指定すると50%表示となるため、次のように半分だけ表示するようになります。

50%表示の例

サイトのレスポンシブ対応に関する基本的な設定については、Googleが公式で解説しているこちらのドキュメントも参考になります。
レスポンシブウェブデザインの基本 – Google Developers

viewportで設定できる項目

viewportの設定は必要に応じて様々な値を設定します。
続いて、「width」や「initial-scale」などの基本項目と合わせて他にも設定できる項目について解説します。

width

コンテンツの表示幅を指定する。

widthの設定例

/* デバイスの幅を自動的に設定 */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* 表示幅を540pxに指定 */
<meta name="viewport" content="width=540, initial-scale=1.0">

initial-scale

コンテンツの表示スケール（ズーム率）を指定する。

initial-scaleの設定例

/* 表示スケールを等倍に設定 */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* 表示スケールを50%に設定 */
<meta name="viewport" content="width=device-width, initial-scale=0.5">

minimum-scale

ズームアウト（縮小）した時の最小スケールを指定する。

minimum-scaleの設定例

/* ズームアウトの最小スケールを等倍に設定（縮小できない設定） */
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

/* ズームアウトの最小スケールを150%に設定 */
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.5">

maximum-scale

ズームイン（拡大）した時の最大スケールを指定する。

maximum-scaleの設定例

/* ズームインの最大スケールを等倍に設定（拡大できない設定） */
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

/* ズームインの最大スケールを200%に設定 */
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">

user-scalable

ユーザーによるズームイン（拡大）&ズームアウト（縮小）操作を有効/無効に設定する。
ただし、PCブラウザの標準機能「拡大」「縮小」については設定が効かない。

user-scalableの設定例

/* ズームイン&ズームアウトを無効にする(「0」を指定することも可) */
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

/* ズームイン&ズームアウトを有効にする(「1」を指定することも可) */
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">