<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= 表示領域の幅 数値 ピクセル数 （200～10000 の範囲、初期値は 980）
device-width 端末画面の幅に合わせる
height= 表示領域の高さ 数値 ピクセル数 （233～10000 の範囲、初期値は自動）
device-height 端末画面の高さに合わせる
initial-scale= 初期のズーム倍率 数値 倍率 （minimum-scale～maximum-scale の範囲）
minimum-scale= 最小倍率 数値 倍率 （0～10 の範囲、初期値は 0.25）
maximum-scale= 最大倍率 数値 倍率 （0～10 の範囲、初期値は 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-scale と maximum-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">

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

</head>
<body>



</body>
</html>