レスポンシブWebデザインをIE8に対応させる方法

IEへの対応は？

InternetExplorerは昔かサイト制作者を悩ませ続けてきました。せっかくレスポンシブサイトを作ろうとしても、レスポンシブサイトというとセットでついてくるメディアクエリ、これにはIE8以下の下位バージョンが対応しておらず、表示は見事に崩れます。

1. 未だ切り捨てられないIEへの対応

未だ切り捨てられないIEへの対応

モバイルファーストかつレスポンシブということを思えばIE、しかも下位バージョンなら切り捨ててもいいのではないかと思いますが、様々な事情から切り捨てられないシーンもあるでしょう。以前に比べれば低くなったとは言え、特に日本ではIE8のブラウザシェアはまだまだ残っています。

参照：StatCounter Global Stats – Browser Version Market Share

そういった時のために、比較的手軽にIE向けの対応を行える方法があります。

1.「css3-mediaqueries.js」を読み込む

こちらはGoogleが推奨している比較的有名なスクリプトです。html5.jsやIE9.jsなどと併用してもOKのようです。

使い方は<head>内に以下を記述します。

&amp;lt;!--[if lt IE 9]&amp;gt;
&amp;lt;script src=&amp;quot;http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;![endif]--&amp;gt;

基本的には読み込ませるだけでOKなのですが、こちらの方法は注意点がいくつかあります。

media typeを省略してはいけない

通常メディアクエリを指定する場合は、

@media (max-width:768px){}

のようにmedia type（allやscreen等）を省略しても動作しますが、css-mediaqueries.jsを利用する場合はmedia typeを省略すると無効になるようです。

@media screen and (max-width:768px){}

と正しく記述しましょう。

CSSの読み込みは@importを使わない

CSSを@importで呼び出している場合は、こちらも動作しません。

&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;base.css&amp;quot;&amp;gt;

のように、CSSの読み込みを記述しましょう。

特殊な条件で無効になる

こちらは検証はしていませんが、css3-mediaqueries.jsが効かなくて困った時のまとめで以下の報告がありました。

１．@mediaの記述だけを別ファイルにする
２．@media記述より前に@charset記述を書く
３．@mediaの記述以外の通常のCSSルールは書かない

上記の全てが揃うと100％無効になるようです。

こちらの回避方法としては、ファイルを分割しないか、メディアクエリ用cssには@charset指定をしないのどちらかになると思います。

2.「Respond.js」を読み込む

軽量でサクサク動きます。
・Respond.js（github）

Respond.jsの仕組みは以下

media属性付きのstyle要素を挿入してMedia Queries対応チェック

対応していなければCSS（link要素のみ。style要素はNG）を解析してMedia Queries（max-width or min-width限定。@mediaから始まるブロック）を読み取る

window.onresizeイベントで横幅を監視して、上記2の条件と一致するstyle要素を生成・挿入する

参考サイト：http://lab.informarc.co.jp/javascript/ie_responsive_webdesign.html

どちらを利用しても問題はありません。注意点を意識してぜひお試し下さい。