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

更新日
仕様 スマートフォン向け（非標準）
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所
内容 無し（空要素）

meta要素に name="viewport" を追加すると、文書のビューポート（表示領域）を設定することができます。

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

<meta name="viewport" content="width=device-width, initial-scale=1">
属性 値
任意属性
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=device-width, 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 を指定するのが一般的です。
  • device-width を指定した場合は、初期のズーム倍率が 1 になります。（initial-scale で変更することも可能）

heightプロパティについて

height は、ビューポートの高さを設定します。値にはピクセル数、または device-height （端末画面の高さに合わせる）を指定します。

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

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

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

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

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

<meta name="viewport" content="initial-scale=1">
  • 1（1.0）を指定するのが一般的です。

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 は、ズーム操作を許可するかどうかを指定します。（既定値は yes）

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

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

使用例


<!DOCTYPE html>
<html>
<head>

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

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

</head>
<body>



</body>
</html>