
レスポンシブのサイトのコードを見るとheadタグ内に
1 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
上記のような記述がある。
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 しかあまり見たことが無い。