結論から言うと単なるケアレスミスが原因だったんですが一応メモ。
一般的には以下のような文が書いてなくてメディアクエリーが効かないってことが多いと思います。
<meta name="viewport" content="width=device-width, initial-scale=1">
これ以外のケースで効かないことが2件あったので記しておきます。
- セレクタの記述ミス
- 文法ミス
1.セレクタの記述ミス
PC用のコード
div#page1
モバイル用のコード
#page1
これでスマホで表示すると#pageはPC用のCSSで表示されてしまい悩みました。違うものと認識されてしまうようなので統一すべきでした。一方はh1でもう一方はh1.defにしてたり…。
2.文法ミス
FiregugやChromeの開発ツールでモバイルフレンドリー用の表示にしてモバイル用のcssを書いていたんですがまったく反映されず「あれ？ファイルをアップロードしてスマホで確認しないとダメなんだっけ？」と頭がテンパってしまいました。
そんなはずはなく、単にcssの文法がおかしかっただけのようです。
コメントが/*だけで閉じてなかったりとか、複雑なcssをネットでコピペしたりすると間違ってることがあるかもしれません。
それでもダメなときはcss全体の文法とかを見直してみるといいかもしれません。本件に限らず私の場合はこうしたミスが多々あります。