レスポンシブWebには「mediaqueries.js」よりも「Respond.js」が良い？

レスポンシブWebは、PCやスマフォなどモバイル端末の見栄えを、1ソース（同一HTMLファイル）で最適化しようという最近注目の技術です。
つまり、PC用サイトと、スマフォ用サイトを別々に構築する方法がありますが、レスポンシブWebでは1ソースで管理し、CSSで見た目の最適化を図ろうということです。

海外サイトではよくみられますが、最近では日本のサイトでもみかけますね。
以下、参考までに、レスポンシブWebサイトをまとめたサイトです。
http://mediaqueri.es/

このレスポンシブWebを作成するのに有効なJSライブラリ「mediaqueries.js」と「Respond.js」のお話です。

CSSを切り替える方法について

まず、CSSを切り替える方法について、主に以下の2つがあります。

• JSでユーザエージェント情報を取得して端末を判定してCSSを切り替える
• CSS3のメディアクエリの機能を利用して画面サイズに応じてCSSを切り替える

JSでのユーザエージェント判定は完全には難しいので、大まかな振り分けになります。たいてい「iPhone、iPad、Android以外」といった感じです。
見た目よりも、「iPhoneではこの表示でないといけない」といった要件だとこの手法が良いかもしれません。

それに対して、メディアクエリを使った方法では、端末の種類ではなく画面幅を読み取り切り替えます。したがって、あらゆる端末における見た目の最適化という意味では、こちらの手法のほうが良いでしょう。

「Media Queries」はCSS3が有効であることが前提

メディアクエリはCSS3をベースとした技術なので、IE8～IE6などCSS3に対応していないブラウザでは実装できません。

そもそも、スマフォやタブレットで見るときに最適化する目的であれば、IE8～IE6で機能しない事なんて気にしないでよいはずなので、切り捨てるという判断もできます。
それで問題ないと思います。懸命だと思います。そうすると話はここで終わりです。

しかし、PCでもブラウザサイズに応じて最適化したい、もちろんIE8～IE6でも見えるようにしてほしい、とりあえず可能なら何でも対応してほしい、というのがクライアントの心理です。

「mediaqueries.js」というJSライブラリ

「mediaqueries.js」はIE8～IE6などCSS3に対応していないブラウザでもメディアクエリを実現するJSライブラリです。

css3-mediaqueries.js: make CSS3 Media Queries work in all browsers (JavaScript library)

こちらのライブラリを読み込むだけで、CSS3未対応のブラウザでもメディアクエリが有効になります。

しかし、私が実際に利用してみたところ、うまくいきませんでした。
どうやら、CSSの記述方法などに問題があるようです。

IEで「mediaqueries.js」が効かない場合、というようなキーワードで検索してみると、いくつかの記事がヒットし、そこにCSSの記述ルールなどがあります。
これらを参考にコードを修正してみましたが、それでもうまくいきません。

どうやら「mediaqueries.js」を利用するにはいくつかの条件があり、あらゆるコーディングにも有効というわけではないようです。

「Respond.js」というJSライブラリ

同様に「Respond.js」というJSライブラリもあります。

scottjehl/Respond • GitHub

先ほどの私のサイトに読み込んでみたところ、問題なくIE8～IE6でもレスポンシブWebサイトになりました。特にCSSの調整などもしていません。

まとめ

両者とも同じ目的で用意されたライブラリです。恐らく他にも数種類あるでしょう。

性能の比較までは行っていませんが、JSを利用しているので、クライアント端末の性能が低い場合にはだいぶカクカクと動きになってしまうかもしれません。

ただ、今回のケースでは、私のほうで用意したコーディングデータがたまたま「Respond.js」にマッチしていたという事でしょうか、導入コストでは若干勝るかなという印象です。

今後もレスポンシブWebを構築する際に、両者を比較、検証してみたいと思います。