レスポンシブ対応と聞くと、＠mediaクエリが真っ先に思い浮かぶ方は多いと思います。
間違えではありませんが、＠mediaクエリよりもmeta viewportの方がレスポンシブ対応の重要な役割を果たしています。
もはやmeta viewportが無いと完璧なレスポンシブ対応にはならないので、必ず覚える必要があります。
しかし近年のWEB制作はテンプレートを使用するものが多く、それらには当たり前の様にmeta viewportの記載がされているので、その重要性に気づけていない人が多い様です。
今回の記事では、レスポンシブ対応で影が薄くなりがちなmeta viewport（メタ ビューポート）についてを紹介します。
meta viewportとは？
meta viewportは、スマホやタブレットなどのモバイル端末で最適なWeb表示させるために必要なHTMLタグです。
Googleが推奨するレスポンシブWebデザインではmeta viewportの使用があるので、
現在のWEBサイトでは、ほぼ必ず入れなくてはいけないHTMLタグとなっています。
meta viewportの基本的な書き方は以下です。（Google推奨の記述。実際はこの記述だけ覚えておけば大丈夫です。）
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head><meta name=”viewport” content=”width=device-width, initial-scale=1.0″>の記述をheadタグの任意の場所に入れて下さい。（大抵の場合はタイトルタグの前後くらいに設置されています。）
次で記述の解説をします。
meta viewportの記述解説
初めのmeta name=”viewport”でviewport(表示領域)に関しての宣言を開始します。
content=”width=device-width, initial-scale=1.0″の部分はそれぞれの属性値です。
content=”width=device-widthでは、content(コンテンツ)のwidth=device-width(幅はデバイス幅と同じ)ですよと言う意味です。
要するに、iPhone端末で表示するときはiPhone端末の表示領域に最適化された表示がされます。iPadで表示したらそれに最適化された表示になります。
initial-scale=1.0の記述では、初期のズーム倍率を示しています。1.0ならば1倍なので最も標準的な見た目をします。
反対に2.0、3.0と数値を上げれば拡大表示され、テキストや要素が大きく表示されます。
他にも「user-scalable=no」「user-scalable=yes」を追加する事で、ユーザーに拡大表示を許すか否かを設定できます。
（通常はこの記述はしなくても良い。この部分はユーザーに任されば良いので。）
完璧なレスポンシブを目指すなら
完璧なレスポンシブを目指すなら今回紹介したmeta viewportの記述が必須です。
meta viewportの記述をした上で、細かいレスポンシブ調整をCSS3のmedia query（メディアクエリ）で調整する事で完璧に近い形になります。
media query（メディアクエリ）に関しては以下の記事で紹介しているので合わせてどうぞ。
以上が「完璧なレスポンシブを目指すならmeta viewportも理解しよう」でした。
meta viewportとmedia queryをマスターしてスマホファーストなWEBデザインを目指しましょう。
