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