マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > デザイン > レスポンシブの要「viewport」の意味を理解しよう!

Mighty Ace Blog

マイティーBlog

デザイン

2021.05.23

レスポンシブの要「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アナリティクス設定項目チェックシート(無料)

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

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.