【レスポンシブ】metaタグにviewportを書かないとどうなる？

ねこちゃん

metaタグでviewportを指定しないとどうなるの？

みとり

メディアクエリが使えないからレスポンシブに対応できないよ。

headタグ内のmetaタグにおまじないのように

<meta name="viewport" content="width=device-width, initial-scale=1.0">

と書くと覚えている人は結構たくさんいるのではないでしょうか？

自分自身相当詳しくこれを書く理由を知っているわけではないのですが

１つだけ、書かないことによって実現できなくなることがあるのを知っていたので共有しますね。

viewportを書かないとメディアクエリが使えなくなる

@media(max-width: 600px){
  省略…
}

cssに@mediaを使ったことがあると思いますが、

この@mediaがviewportの記述が抜けていると正常に働きません。

まとめ

メディアクエリを書いてあるのに働かないと言うときはまずmetaタグのviewportを確認しましょう。

記述ミスや、抜けがあるかもしれませんよね？

初心者あるあるなので注意してみてください。

それではまた！