viewportの指定

viewportとは

  • viewportは、Web表示の仮想サイズを指定するもので、スマートフォンやタブレットでWebを閲覧したときだけ機能する設定
  • viewportを適切に指定しないと、PC用のレイアウトでWebページが表示されます（画面の幅が980pxとして）
viewportの指定
  • 液晶画面の幅に合わせてWebページが「仮想サイズ」で表示される
  • この仮想サイズを変更する機能が「viewport」です
  • meta要素にname属性を記述し、「viewport」を指定します
  • 続けてcontent属性に設定値を記述します
<meta name="viewport" content="width=device-width">


この記述をすると、「仮想サイズの幅」が「液晶画面の幅（CSSのpx）」に合わせて表示されます。

  • iPhone4/5では「幅320px」、iPhone6では「幅375px」、XperiaZ1では「幅360px」と液晶画面の幅に合わせて「仮想サイズの幅」が自動調整されます


幅を指定して表示

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


この場合は、「width=device-width」の場合「仮想サイズの幅が、300px〜400px」に設定されるのに対して、「仮想サイズの幅が600px」ですから、文字と余白サイズは相対的に小さく表示されます。

  • 液晶画面が「10インチ」のタブレットで見た場合も、幅600pxと仮想されます
  • この相対的な変化は、デメリットとなるため固定値で設定されることはありません
viewportで指定できる設定項目
  • 「仮想サイズの幅」だけではなく、ズーム操作などの設定もできます

プロパティ 設定内容 指定可能な値
width 仮想サイズの幅 200〜10000または device-width
height 仮想サイズの高さ 223〜10000または device-height
initial-scale 表示倍率の初期設定 minimum-scale〜maximum-scaleの範囲
minimum-scale 最小の表示倍率 0〜10
maximum-scale 最大の表示倍率 0〜10
user-scalable ズーム操作の可否 yes / no