レスポンシブの要「viewport」の意味を理解しよう！

ページをレスポンシブ対応させる時HTMLに

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

をコピペしている方が多いと思いますが
このコードの構造について今回深堀りしていきます！

そもそもviewportとは

viewportとは「表示領域」のこと、

PCではブラウザウィンドウの表示領域のことになります。

そしてブラウザはこのviewportにレンダリングを行います。

・viewportで設定できる主な要素

width（横幅）

Viewportの横幅をピクセル単位で指定します。

ちなみに初期値が設定されており960pxです。

冒頭の「width=device-width」は

viewportの幅を

「実際の解像度ではなく端末やブラウザに合わせた値を返す」と設定するため

メディアクエリでのブレイクポイントの切り替えをを可能にしています。

height（縦幅）

使用する頻度は少ないですが同じく縦幅についても指定可能です。

initial-scale (初期倍率)

ページが表示された最初の倍率を指定します。

width=device-widthを指定していると

「initial-scale=1」が自動的に設定されます。

maximum-scale（最大倍率）minimum-scale（最小倍率）

それぞれ最大拡大倍率と最小縮小倍率の指定になります。

user-scalable （ズーム操作の可否）

ページを閲覧しているユーザーのズームの可否を指定します。

初期値は「user-scalable=yes」でズームが許可されている状態です。

・まとめ

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

とは

「ブラウザがレンダリングを行う表示領域を端末やブラウザに合わせた値とし」

「初期倍率を1と設定している」

状態の事になります。

これは必要最低限のviewport設定で

最近はスマートフォンごとに機種独自の画面仕様があったりと

上記のタグだけでは不十分な場合も。

そんなケースについても今後紹介できればと思います！

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。