<meta name="viewport" content="">

ブラウザ スマートフォン向け
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所
内容

meta要素name="viewport" を追加すると、文書の表示領域を設定することができます。

  • これはスマートフォン向けの機能です。
  • この指定内容はHTML5では正式に定義されていません。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

属性
任意属性
name="" 文書情報の種類 viewport 表示領域の設定
任意属性(name を指定している場合は必須
content="" 文書情報の内容 プロパティ= プロパティと値を指定

content属性の値には、以下のプロパティを指定することができます。

プロパティ
width= 表示領域の幅 数値 ピクセル数 (20010000 の範囲、初期値は 980
device-width 端末画面の幅に合わせる
height= 表示領域の高さ 数値 ピクセル数 (23310000 の範囲、初期値は自動
device-height 端末画面の高さに合わせる
initial-scale= 初期のズーム倍率 数値 倍率 (minimum-scalemaximum-scale の範囲)
minimum-scale= 最小倍率 数値 倍率 (010 の範囲、初期値は 0.25
maximum-scale= 最大倍率 数値 倍率 (010 の範囲、初期値は 1.6
user-scalable= ズームの操作 yes 許可する (初期値)
no 許可しない
  • width の初期値は、ブラウザにより異なる場合があるようです。

複数のプロパティを指定する場合は、カンマ( , )で区切って記述します。

content="width=320, initial-scale=1, minimum-scale=0.5, maximum-scale=2"

widthプロパティについて

width は、領域の幅を設定します。値にはピクセル数、または device-width (端末画面の幅に合わせる)を指定します。

<meta name="viewport" content="width=320">
<meta name="viewport" content="width=device-width">
  • device-width を指定した場合は、初期のズーム倍率が 1 になります。(initial-scale で変更することも可能)

heightプロパティについて

height は、領域の高さを設定します。値にはピクセル数、または device-height (端末画面の高さに合わせる)を指定します。

  • 通常、height の指定は特に必要ありません。
<meta name="viewport" content="height=480">
<meta name="viewport" content="height=device-height">

initial-scaleプロパティについて

initial-scale は、初期のズーム倍率を設定します。

例えば、1.5 を指定した場合は1.5倍に拡大、0.5 を指定した場合は半分に縮小して表示されることになります。

<meta name="viewport" content="initial-scale=1.5">

minimum-scale と maximum-scaleプロパティについて

minimum-scalemaximum-scale は、ユーザーがズームできる範囲を指定します。(どちらかのみを指定することも可能です)

  • minimum-scale … 最小倍率
  • maximum-scale … 最大倍率

次の例では、0.5倍~2倍の範囲でズームが可能となります。

<meta name="viewport" content="minimum-scale=0.5, maximum-scale=2">

user-scalableプロパティについて

user-scalable は、ズーム操作を許可するかどうかを指定します。

値に no を指定すると、ズームの操作が無効になります。

<meta name="viewport" content="width=device-width, user-scalable=no">

使用例

TAG indexでは以下の内容を指定しています

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

<title>文書のタイトル</title>

</head>
<body>



</body>
</html>