name="viewport" content="width=device-width, initial-scale=1"とは？
レスポンシブのサイトのコードを見ると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 しかあまり見たことが無い。
