ビューポートの設定

ビューポート

  • デバイスのディスプレイサイズによって表示できる情報量が決まる
  • ビューポートの設定を行わなかった場合、widthの値を「980」と指定sたものとして処理されます
  • ビューポートの指定は、デスクトップ環境のブラウザには影響しません
<meta name="viewport" content="width=device-width">

ビューポートの設定をしたときのページの表示範囲の大きさ

  • デバイスの画面解像度ではなく「density」に基づいた解像度となります
density
  • device pixel ratio
  • ディスプレイサイズや画面解像度が異なるデバイスにおいて、同じものが同じ大きさに見えるようにするために考えられたもの
  • 各デバイスでは同じものを同じ大きさで表示するため、density「１」のデバイスを基準として処理が行われます


デバイスを横向きにした場合
  • iOS搭載デバイスでは、ページを拡大します
<meta name="viewport" content="width=device-width">
  • iOS搭載デバイスでも、Androidと同じようにdensityに基づいた解像度で処理するためには、ビューポートの設定に「initial-scale=1.0」の指定を追加します
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ユーザーによる拡大表示の制限
  • 「minimum-scale」と「maximum-scale」で最小値と最大値を指定します
  • ただし、ユーザビリティを悪くする可能性があります
拡大表示を禁止する場合
  • 「user-scalable」を「no」と設定します
  • Androidには、この設定を無効にする機能が用意されています
<meta name="viewport" content="width=device-width, user-scalable=no">