viewportとは?必要性から簡単な設定まで解説します!

Coding

metaタグのオプションとして存在する

<meta name="viewport" content="~">

viewportは理解しにくい概念ですが
スマホでWEBページを閲覧するユーザーが増えたことで
とても重要な要素となりました。

こちらを簡単に説明します。

 

こちらの記事を読むと
viewportとは何か
・viewportに何を設定すれば良いのか
が分かります。

 

そもそもmetaタグって何?という方はこちらをお読みください。

<meta name=”viewport” content=”~”>とは?

 

端的に言うと、

スマホやタブレットでどのように表示するか

を指定するものです。

そもそもviewportとは?

 

WEBページが表示されている部分のことです。

 

PCはブラウザ幅がviewportということですね。

 

 

基本的にはデバイス(スマホやタブレット)の横幅がviewportになります。

ちなみにMozillaのドキュメントにはこのように書かれています。

ビューポートはコンピューターグラフィックの中で現在表示されている領域を表します。ウェブブラウザーの用語では、これは一般にブラウザーウィンドウのうち、ユーザーインターフェイス、メニューバーなどを除いた部分です。すなわち、あなたが見ている文書の部分です。

出典 : Mozilla

なぜ指定しなければいけないのか?

 

私のブログ記事で説明します。

 

ヘッダー、コンテンツがあり、 サイドナビや見えない部分にフッターも存在しています。

 

これをスマホのサイズに当てはめてみます。

黄色い枠がスマホの画面だと思ってください。

 

これではどのように表示すればよいのか機械は分かりません。

仮に左上が表示されたとしても縦横スクロールが大変です。

 

 

そこでviewportを指定します。

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

width=device-widthとは
ページの横幅をデバイス(スマホやタブレット)の横幅に合わせるということです。

 

 

これで表示する範囲は機械も分かるようになりました。

その後はCSSでデバイス毎(○○px以下等)のデザインを指定していけばよいのです。

 

よく指定されるviewportの値

 

例)
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=750, user-scalable=yes">
width
表示するページの横幅を指定します。
device-width か ○○px


initial-scale
初期表示時のズーム倍率
数値で指定(0.1, 1, 2など)


user-scalable
閲覧者がズームの操作をできるかどうか
yes(初期値) か no
他に指定できる値
height, minimum-scale, maximum-scale

 

widthを固定するメリットとデメリット

 

メリット

・閲覧者のスマホ画面サイズに寄らず同じデザインを提供できる

・コーディングが楽になる(デバイス毎の表示を考える工数が減る)

 

デメリット

・タブレットなどで見るとページが拡大表示のようになる

 

viewportについてのまとめ

viewportとは?

デバイス上でWEBページが表示されている部分のことです。

<meta name=”viewport” content=”~”>とは?

スマホやタブレットでどのように表示するかです。

なぜ指定しなければいけないのか?

スマホやタブレットでの表示仕様を指定し、デバイス毎の差異を極力減らす為です。

 

 

レスポンシブが主流の時代(既にスマホでWEBページを読む人が半数を超えている)になってきたので、スマホ対応は必須です。

モバイルファーストなどの考え方も今後さらに加速してくことでしょう。

デバイスの規格も増えて対応が難しくなってきますが、
viewportなどを駆使して 見やすいページを作っていきたいですね!

 

そもそもmetaタグって何?という方はこちらをお読みください。

コメント

タイトルとURLをコピーしました