はじめに
Webページのレスポンシブ対応を行っている際、設定したメディアクエリが反映されませんでした。
原因
headタグにviewportを指定していないことが原因でした。viewportを指定していないことが原因で、980px未満の画面幅が取得できず、980px未満の画面幅をブレイクポイントとして設定したメディアクエリが反映されないようになっていました。
解決策
下記コードのように、headタグにviewportを指定することで980px未満の画面幅を取得し、980px未満の画面幅をブレイクポイントして設定したメディアクエリが反映されるようになりました。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
教訓
viewportを指定することでメディアクエリを利用しレスポンシブ対応できるようになります。しかし、レスポンシブ対応を行う前にviewportを指定しない状態で既に画面を作りこみリリースしていました。そのため、途中でviewportを指定すると大幅にデザインが崩れてしまいました。なるべく工数を抑える方向で最終的に行ったレスポンシブ対応は、viewportを指定せずにタブレットの幅（1280px）をブレイクポイントとして、タブレットとスマホを同一のデザインに調整しました。 途中でviewportを指定すると今回のようにデザインが大幅に崩れてしまう可能性があるため、viewportの指定は開発初期に指定することをお勧めします！