【HTML】name="viewport" content="width=device-width, initial-scale=1" ってどんな意味？

レスポンシブのサイトのコードを見るとheadタグ内に

上記のような記述がある。

viewport　というのはWEBページの表示の範囲をどう設定するかを決めるコードだ。

name=”viewport”　の意味も最初の頃は全く意味不明だったんだけど(笑)

「ここで表示領域の設定をします」と宣言している、という意味だそうだ。

そして、次だ。

content="width=device-width, initial-scale=1"

まず

「width=divice-width　ってどういう意味？」

ってずっと思っていたが、

「表示領域の幅はどうするの？」→「デバイスの幅にします」

って意味だった。

デバイスの幅＝各端末の幅に合わせる（横にスクロールする必要が無く、かつ見やすい幅に）ってことだ。

iPhoneならiPhoneの幅に。

AndoroidならAndoroidの幅に。

PCならPCの幅で表示するように調整する。

これが

width=device-width

の意味だ。

CSSだとよく

width=960px;などのコードを見ていたので、

「なんでpxで指定されていないのか？」

と不思議に思っていたけど、別物だってことにようやく気付いたのであった。

そして

content="width=device-width, initial-scale=1"

の内の

initial-scale=1

はズームのことで、そのページが表示された時に1倍＝100％の拡大で表示されるってことだ。

これが

initial-scale=1.5

だと画面からはみ出してスクロールする必要が出てきてしまうのだ。

基本的にはinitial-scale=1　しかあまり見たことが無い。