viewportとは、ウェブページを表示するPCやスマホなどのデバイスごとの画面表示領域の事を言います。
この画面表示領域の設定をするのがmeta要素のname属性の値であるviewportとなります。
このviewportの正しい書き方と詳しい解説をしていきます。
viewport(ビューポート)とは
viewportとは、ウェブページを表示するPCやスマホなどのデバイスごとの画面表示領域の事を言います。
分かり難いのですが、簡単に言うと今見ている画面の範囲がviewportとなります。
この画面表示領域の設定をするのがmeta要素のname属性の値であるviewportとなります。
それでは、meta要素のviewportの詳しい内容を説明いたします。
viewportの書き方
まずはviewportの書き方です。headタグ内に以下のタグを記述します。
<meta name="viewport" content="width=device-width, initial-scale=1">viewportである事を示すため、name属性には「viewport」を記述します。
content属性にはいくつかのプロパティがあり、上記では「width」と「initial-scale」があります。各プロパティにそれぞれ値が入っていますが、意味は以下の通りです。
・「width=device-width」
width(横幅)を各閲覧しているデバイスに合わせる
・「initial-scale=1」
ページを読み込んだ際の表示倍率を1倍に設定
上記の設定が推奨されているviewportのcontent属性のプロパティと各値となります。
widthやinitial-scaleの他にもプロパティはあります。各プロパティと設定できる値については次の項目をご覧ください。
content属性の設定
先程説明しました、content属性の内容はcontent=”width=device-width, initial-scale=1″が推奨されていますが、場合によっては他のプロパティや値を設定する事もありますので、各プロパティや設定できる値について説明いたします。
width
ビューポートの横幅を指定します。
最小値は200、最大値は10000。device-widthはデバイスの幅(100vw、100%)となります。初期値は980となります。
※ブラウザにより初期値は違う場合もあります。
height
ビューポートの高さを指定します。
最小値は233、最大値は10000。device-heightはデバイスの高さ(100vh、100%)となります。初期値は自動となります。
initial-scale
ページを読み込んだ際の表示倍率を指定します。
minimum-scale～maximum-scaleの範囲で設定できます。初期値は1となります。
※initial-scaleとminimum-scaleは同時に設定できません。
minimum-scale
ページをどこまでズームアウト(縮小表示)出来るかを指定します。
最小値は0、最大値は10。初期値は0.25となります。
※initial-scaleとminimum-scaleは同時に設定できません。
maximum-scale
ページをどこまでズームイン(拡大表示)出来るかを指定します。
最小値は0、最大値は10。初期値は1.6となります。
※アクセシビリティの観点から、拡大倍率は2や3以上が望ましいという意見もあるようです。当サイトでは初期値のままとしています。
user-scalable
ページのズームアウト(縮小表示)、ズームイン(拡大表示)を許可するかどうかを指定できます。
値yesかnoとなります。初期値yesとなります。
以上が各プロパティの説明となります。
content属性の内容はcontent=”width=device-width, initial-scale=1″が推奨され、このままでほとんど問題無くレスポンシブ化が出来ますが、場合によっては必要となりますので、覚えておいた方がいいかと思います。
さいごに
いかがでしたでしょうか。
ビューポートの意味や設定方法・内容を覚えておく事で応用が効きます。ほとんどが推奨される内容で問題ありませんが、一度確認してみてください。
