Rails - Media Queriesが効かない

HTML/CSS Ruby on Rails

問題

Rails on Railsでviewを書いている時に、以下のようにcssをレスポンシブ対応していたのですが、画面を480px以下にしてもスマホ向けのcssが適用されない現象が起きました。


header {
  color: white;
}

@media (max-width: 480px) {
  header {
    color: black;
  }
}

解決策

僕の場合は、viewportを設定すれば解決しました。

以下のようにapplication.html.erbのhead内にviewportを記述すると、無事レスポンシブが効くようになります。


...
<head>
  ...
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>