viewport
ってスマホ対応の時使うレスポンシブル対応のやつだな、
っということしかわからなかっための勉強します!
参考:http://ichimaruni-design.com/2015/01/viewport/
結論
・スマホサイトがある場合
<
meta
name
=
"viewport"
content
=
"width=device-width,initial-scale=1.0,minimum-scale=1.0"
>
width=device-width : 幅をデバイスごとにサイズを切り替えてくれる!
initial-scale:初期のズーム倍率
※device-width ⇄ 初期のズーム倍率が 1 になる。(initial-scale=1.0)
minimum-scale=1.0とすることで最小倍率を指定しているが、初期ズーム倍率と等しいため、縮小できない状態。
なぜ、縮小できなくするのか謎・・・。
Yahoo!の天気サイトもしてた・・。これ↓
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no”>
user-scalable=noってしてるのに、拡大できるやん?なんで?
と、思ったらいろんなサイト比較してるとこ発見!
しかし、よくわからない。
maximum-scale=1.0,minimum-scale=1.0,user-scalable=no
ってどうなれば正しい挙動なの?
・PCサイトしかなく、SPで最適化したい場合
<
meta
name
=
"viewport"
content
=
"width=960(コンテンツの大きさ)"
>
これすれば、横の余白がなくなる。