IE8以下は media query に対応していないため、レスポンシブにするとどうしても表示が崩れます。

メインCSSでレイアウトを作ってからモバイルだけ上書きしていく形でならなんとか見れなくもない感じになるのかもしれませんが、モバイルからやっていく場合や、そもそもレイアウトCSSは全部 media query で呼ぶ場合なんかは、モバイル版で表示されたり、おもいっきり崩れたりでとてもだけど読めたもんじゃなくなったり…。

そこで、css3-mediaqueries.jsを仕込んでいたのですが、どうも動いていなかったようで、先日メモっといた内容を思い出すのにたまたま会社からこのブログを見たらまぁ大変なことになっていましてね。

古いブラウザで media query に対応させるライブラリでもう1個よく話題になる Respond.js を試して見ることにしました。

とりあえずGitHubからコードをもらってきてサーバーにアップロード、header.phpに読み込むためのタグを書きます。

 自分はテーマフォルダの中に「lib」フォルダを作ってその中にライブラリを放り込んでいるのでこんな感じですが、パスは自分の環境に合わせて下さい。

ところで、このライブラリ、色んな所で紹介されてますけれど、どれも条件付きコメントなしで直接呼んでるんですよね。古いIEでしか要らないわけだし条件付きコメントとかでもいいんじゃないかな？と思うのですが、どうなんでしょう？
公式でも条件付きなしで書かれてるしもしかしたらモダンブラウザだと自動的に動作しないようになってるのかな？？
謎です。。

本当はJSだし wp_enqueue_script() を使って読ませるべきなのかなぁ？
ライブラリに依存しないようだし、と思ってそのまま書いちゃったけど…。

あとは、普通に CSSを読み込みます。今書いたRespond.js読み込みよりも前に。

恥ずかしながら自分はここではまりました。

いつもheadの中身は meta > js > css ってしてたので。。

（最近はJSをフッターに持ってきたほうがーなんて話も聞きますのでこの順番自体どうなのかなって気がしてますが、たいしたライブラリ使わないからかあんまり体感的に変化がなかったので今でも意識しないで書くとこの順番になってることが多いです）

なので、CSS読み込んだあとに、このJSを読ませるようにしたらようやく表示されるようになりました。

それでもまぁ多少見た目が怪しい部分は残りますが、これ以上はまぁいいかな、と。仕事じゃないんで許してください←

ちゃんと見たい人はChromeとか使ってね。ってことで。

というか，もしかしたらcss3-mediaqueries.jsも読み込む順番のせいでダメだったのかも……