ページをレスポンシブ対応させる時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設定で

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

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

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

ご相談お問い合わせ

Web広告をご検討中の方はお気軽にご相談ください。
お客さまの目的や広告運用状況に合わせて、最適なWeb広告運用プランをご提案いたします。