「レスポンシブウェブデザイン」カテゴリーアーカイブ

メディアクエリーが効かない・・


結論から言うと単なるケアレスミスが原因だったんですが一応メモ。

一般的には以下のような文が書いてなくてメディアクエリーが効かないってことが多いと思います。

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

これ以外のケースで効かないことが2件あったので記しておきます。

  1. セレクタの記述ミス
  2. 文法ミス

1.セレクタの記述ミス

PC用のコード

div#page1

モバイル用のコード

#page1

これでスマホで表示すると#pageはPC用のCSSで表示されてしまい悩みました。違うものと認識されてしまうようなので統一すべきでした。一方はh1でもう一方はh1.defにしてたり…。

2.文法ミス

FiregugやChromeの開発ツールでモバイルフレンドリー用の表示にしてモバイル用のcssを書いていたんですがまったく反映されず「あれ?ファイルをアップロードしてスマホで確認しないとダメなんだっけ?」と頭がテンパってしまいました。

そんなはずはなく、単にcssの文法がおかしかっただけのようです。

コメントが/*だけで閉じてなかったりとか、複雑なcssをネットでコピペしたりすると間違ってることがあるかもしれません。

それでもダメなときはcss全体の文法とかを見直してみるといいかもしれません。本件に限らず私の場合はこうしたミスが多々あります。

レスポンシブウェブデザインと画像の比率


PCではきちんと表示されるのにモバイルだと画像の縦横比がおかしくなる(縦長になる)現象に悩まされていましたが何とか力技で解決しました。

原因は記事内の画像にstyleが適用されているからじゃないかと思っています。

<img src="http://hoge/hoge.jpg" style="width: 440px; height: 338px;" />

このstyle=の部分を削除して表示してみると縮尺がまともになったからです。しかし、これを全記事削除するのは大変なので、以下のコードをテーマ(子テーマ)のcssファイルに追加しました。

img {
    height: auto !important;
}

!importantをつけることにより、styleの既述があっても最優先でheightがautoになるようにしています。大きな影響が出ると困るので、モバイルアクセスの時だけCSS設定しておく方がリスクが小さいんじゃないかと思います。

参考リンク

 

レスポンシブウェブデザインの作り方に関する記事のまとめ