【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 しかあまり見たことが無い。

おすすめの記事