コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて

スマートフォンをはじめとしたモバイル端末でホームページを表示することを想定するとき、Viewportと呼ばれるタグを挿入します。
タグ を挿入する時、例えば以下のようなコードを*コピー＆ペーストしている方は多いのではないでしょうか。

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

貼り付けるだけでも問題ありませんが、構造を理解すれば好きなようにカスタマイズすることも可能です。

今回は、Viewportの基本的な概念から設定に関する具体的なコツをご紹介します。

Viewportとは？

Viewportとは表示領域のことで、 ブラウザ における仮想のカンバスサイズを決めて、サイトの表示の仕方を制御する役割があります。

例えば、上記のようなホームページがあるとします。
モバイルのViewportを指定していない場合は、デスクトップサイトで表示される横幅をモバイル端末の横幅と合わせてしまうので、以下のように非常に小さくて閲覧しにくい状態で表示されてしまいます。

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

上記のように指定すると、横幅360pxの仮想領域としてViewportが作られます。
ブラウザ はこのViewportの幅をもとにレンダリングを行うので、メディアクエリでも360pxとして反応し、DOM操作でclientWidthを取得しても360pxとなります。
モバイル端末の幅よりもViewportの幅のほうが小さいか同じであれば、スマートフォンサイトとしてストレスなく閲覧することができるでしょう。

以下のように指定すると、Viewportの幅は実際の解像度ではなく端末や ブラウザ に合わせた値を返します。

<meta name="viewport" content="width=device-width">

Viewportで指定できるもの

1. width (横幅)

Viewportの横幅をピクセル単位で指定します。意外と知られていませんが、初期値は960pxです。
また、指定できる範囲は200px〜10000pxで、そのほかに デバイス 幅に合わせるdevice-widthがあります。

2. height (縦幅)

Viewportを指定するときにはあまり登場しませんが、横幅とのアスペスト比から計算される値が初期値となっています。
特に指定することはないとは思いますが、同じように200px〜10000pxの間で指定でき、device-heightも指定できます。

3. initial-scale (初期倍率)

初期倍率を設定します。
width=device-widthとしてinitial-scaleを指定しない場合は、自動的にinitial-scale=1となります。
一方、initial-scale=1とした時には、やはり暗黙的にwidth=device-widthであるので、実はどちらかを指定しておけば大丈夫です(※)。

※ Windows PhoneのIEではinitial-scaleに対応していないので、やはりinitial-scaleとwidthを同時指定したほうがいい、という考え方もあります。

4. minimum-scale (最小倍率)

最小縮小倍率を指定することができます。
初期値は0.25で、0より大きく10未満の値を指定します。
こちらもあまり知られていないかもしれませんが、initial-scaleとminimum-scaleは一緒に指定することができません(縮小ができなくなります)。

5. maximum-scale (最大倍率)

同様に、最大拡大倍率を指定できます。
初期値は1.6で、0より大きく10未満の値を指定します。

6. user-scalable ( ユーザー のズーム操作の可否)

ユーザー がズームすることを許可するかどうかを指定することができます。
初期値はuser-scalable=yesで、yes/noまたは1/0で指定することができます。

7. target-densitydpi (ターゲットとなる画面密度)

こちらは旧版の Android 端末に向けて指定します。
ターゲットとなる画面密度を設定しますが、target-densitydpi=device-dpiとすると端末ごとに表示される文字サイズも大きく変わってきてしまいます。
そうならないように、target-densitydpi=medium-dpiに設定するか、あるいはそもそも記述しない、というのが最近の慣行となっているようです。

最近の Android 端末( Android 4.2以降)では廃止されているので、特に気にしなくてもいいかもしれません。

Viewportとメディアクエリの関係

スマートフォン対応のWebデザインを行うときに、Viewportとともに必ずといっていいほど登場する言葉が「メディアクエリ」(Meria Queries)です。
しかしながら、Webデザインを勉強したての頃は、Viewportとメディアクエリを混合してしまったり、違いをよく理解していないかもしれません。
そこで、メディアクエリについても確認していきましょう。

メディアクエリとは

メディアクエリとは、 デバイス の解像度やウィンドウの幅、向きなどの指定条件に合わせて、別々の CSS を適用できる機能のことをいいます。

以前は ユーザー エージェント(User Agent)という端末ごとの情報によって、パソコン・スマホを JavaScript などをつかって判別し、デスクトップサイト用・モバイルサイト用に振り分けていました。
しかし、メディアクエリの登場により、スクリーン幅に応じて CSS を切り替えるレスポンシブデザインを行うことが可能になりました。

メディアクエリでは、link要素中のmedia属性や CSS の@media規則を使って、 デバイス やスクリーンサイズで適用範囲を切り替えることができます。
一般的に、link要素を利用して複数ファイルを読み込むよりも、 CSS 中で@mediaを記載した方が HTTP リクエストの回数が少なく、 ページ の読み込みが早くなると言われています。

ブレイクポイント

メディアクエリを使った CSS の切り替えでは、 CSS の切り替え条件として「ブレイクポイント」(Break Point)を設定します。

メディアクエリの記述例

メディアタイプのみを指定する場合はこのように記述します。

@media screen {
　　* {font-size: 16px; }  
}

onlyをつけることで、メディアクエリに対応していない ブラウザ にはメディアクエリを読み込ませないようにできます。

@media only screen {
　　* {font-size: 16px; }  
}

また、メディアタイプとブレイクポイントを設定することもできます。

@media screen and (min-width:960px){
　　* {font-size: 16px; }  
}

効率のよいメディアクエリの書き方

一般的に、メディアクエリは「モバイルファースト」の考え方に沿って、スマートフォンなどの小さなスクリーン用から記述していきます。
その際、メディアクエリを指定していない CSS 部分にはデスクトップとモバイルで共通のデフォルトのスタイルシートを記述し、メディアクエリを使った部分では、メディアクエリを指定していないデフォルトのスタイルシートとの差分を記述していきます。

@charset "utf-8";
　　// デフォルトのスタイル
@media screen and (min-width : 480px){
　　// 最小幅 480px 以上の指定
}
@media screen and (min-width : 768px){
　　// 最小幅 768px 以上の指定
}
@media screen and (min-width : 1024px){
　　// 最小幅 1024px 以上の指定
}

ブラウザ は上からメディアクエリを判別していきます。
例えば上記のスタイルシートの場合、ウィンドウ幅が480px未満だと、 ブラウザ は以下の2つ目以降の指定を読み込みません。

このようにメディアクエリを効率よく記述することで、無駄なくスタイルシートを読み込ませることができます。

Viewportとメディアクエリの関係

ところで、スマートフォン デバイス に関しては、レスポンシブデザインで レイアウト を行う際には、 CSS でメディアクエリを、 HTML でViewportを両方設定しておく必要があります。
これは、メディアクエリだけを指定したとしても、Viewportがなければ何も起こらないからです。

一方、メディアクエリを正しく設定しておけば、Viewportでwidth=device-widthを指定しておくだけで、ブレイクポイントによる切り替えを行うことが可能です。

まとめ

さまざまなスクリーン デバイス の登場で、ホームページをそれぞれの端末用に複数作らなければいけないという時代もありました。
しかし、Viewportとメディアクエリの登場で、１つの CSS で端末ごとにデザインを制御することが可能になりました。

すでにご存知のことも多いかもしれませんが、ぜひおさらいも兼ねて見返してみてください。