【マナブログ】レスポンシブのviewportを理解する【ロードマップ】

プログラミング

こんばんは、あおです。

今回は「レスポンシブのviewportを理解する」ということで、お伝えしていきます。

 

「viewportってなんとなくお決まりで使ってて、正直あんまり理解してないなぁ」
「とりあえず入れとけばいい感じになるやつやん!」
「まぁいつか分かればいっかで今まで来た」

という方にを想定読者として、viewportについてまとめてみました。
参考になれば幸いです。

 

スポンサーリンク

viewportとは

viewportとは、「表示領域」のとこを指しており、
ブラウザにおけるウィンドウの画面幅(ウィンドウ幅)表示領域がviewportとなる。

 

実例で考える

<meta name=”viewport” content=“width=480”>の場合で考えてみる

幅480pxの仮想的なウインドウが作られる。(これがviewport)

ブラウザはviewportにレンダリング(元になる情報を整形して表示すること)する。

viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。
故に、JSのdocument.documentElement.clientWidthは480pxで返ってくるし、
media queryの条件判定でも480pxの画面幅が使われる。

次にviewportを実際の液晶画面に表示する。

この時、viewportの幅が実際の液晶画面より大きければviewportははみ出して、
表示内容は一部しか表示されない。
逆にviewportの幅が実際の液晶画面より小さければ、液晶画面には余白ができる。

ここで、これをいい感じに調整してくれるのが

<meta name=”viewport” content=”width=device-width“>

である。

<meta name=”viewport” content=”width=device-width”>の場合で考えてみる

「width=device-width」とは、「端末(デバイス=device)ごとの横幅(width)に合わせてね
ということになる。

液晶画面サイズに合うように、ズームアップまたはダウンをして表示する。

 

viewportのcontentに指定できるざっくりな属性

width

  • 表示領域の幅を指定できる。
  • 数値の場合、200px~10000pxの範囲。
  • 初期値は980である。
  • 「device‐width」にすると、端末画面の幅に合わせることができる。

height

  • 表示領域の高さを指定できる。
  • 数値の場合、233px~10000pxの範囲。
  • 初期値は自動。
  • 「device‐height」にすると、端末画面の高さに合わせることができる。

inieial-scale

  • 初期のズーム倍率。
  • 数値で指定する。
  • minimum-scale~maximum-scaleの範囲で指定が可能。

minimum-scale

  • 最小倍率。
  • 数値で、0~10の範囲で指定可能。
  • 初期値は0.25

maximum-scale

  • 最大倍率。
  • 数値で、0~10の範囲で指定可能。
  • 初期値は1.6

user-scalable

  • ズーム操作を許可するかしないかを設定。
  • yes→許可(初期値)/  no →許可しない

 

 

以上を踏まえた上で、スマホ向けサイトの一般的なviewportは

<meta name=”viewport” content=”width=width-device-width,initialscale=1″>

になる。

ということでした!
結果的には、やっぱりそれでいいのか!となりますが、これからは気兼ねなく使えますね!
それにしても便利すぎる機能ですね!

今回参考にさせて頂いたサイトはこちらです!

もう逃げない。HTMLのviewportをちゃんと理解する
viewportの書き方とイケてるスマホサイトのviewport 2018年版

もっと詳しく知りたい!という方は、是非参考にしてみてください。

現在、マナブさん(@manabubannai)のロードマップにてプログラミングを勉強中です。
それに沿って、これからもプログラミング関連の記事を更新していきます!

興味のある方は、Twitterにて、更新時に発信しますので、
もしよければ、Twitter(@aaaaa500000o)をフォローして頂けると嬉しいです!

ここまでご閲覧して頂き、ありがとうございました。

 

コメント

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