投稿日：2014年12月5日｜最終更新日: 2014年12月4日

IE8以下でメディアクエリを対応させるには？

　Internet Explorer 8以下では、メディアクエリが使用できません。
レスポンシブといってもIE8以下は「HTML5」「CSS3」が対応していないためです。

対応方法

javascriptによる対応

　対応策として、以下の2つのJavaScriptのどちらかを実装します。

・css3-mediaqueries-js
・Respond.js

css3-mediaqueries-js

　Google Codeで公開されているJavaScriptの「css3-mediaqueries-js」を使います。
IE5～8でもMedia Queriesを使用できるようになります。
このスクリプトは特に設置しておく必要はありません。
HTML中に、以下のように記述すれば読み込まれます。

<!--&#91;if lt IE 9&#93;> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<!&#91;endif&#93;-->

Respond.js

　
①以下のサイトより、「Respond.js」をダウンロードします。

→ Respond.js

②Webサイトのjsディレクトリに設置し、HTML中に以下のコードを記述します。

<!--&#91;if lt IE 9&#93;> 
<script src="js/Respond.js"></script>
<!&#91;endif&#93;-->

どちらを使うか？

　この２つのjsファイルですが、仕様が微妙に違います。
違いとは、

css3-mediaqueries-js：ie9に対応。
Respond.js：ie9以下に対応。

のようです。
「Respond.js」を選びましょう。
しかし、近年「Respond.js」では対応しきれないことが判明し、現在はあまり使用されていません。

Respond.jsは使えない

　「Respond.js」は、IE8以下のメディアクエリ未対応なブラウザにも代替機能を提供するスクリプトでした。
レスポンシブWebデザインを支えるスクリプトとして、H5BPに長らく（8ヶ月）採用されてきました。
しかし、2012年2月、Modernizr 2.5 のカスタム・ビルダーから「Respond.js」が外されました。
理由は、HTML5 Boilerplate （以下 H5BP）コミュニティでの決定です。

Respond.jsの問題

　Respond.jsが使えない理由として、以下のような問題があります。

・@importが未対応
・<head>内のJavaScriptによりブロッキングが発生する
・追加のHTTPリクエストが必要となる
・Ajax完了前にレンダリングされると、FOUCが発生する
・クロス・ドメインとなるCSSには対応できない

　Respond.jsは、ポリーフィル（古いブラウザがサポートできない機能を何らかの手段で補うもの）として一旦はH5BPに採用されました。
しかし、プログレッシブエンハンスメントの考え方から言っても、「古いブラウザにそこまでのハンディキャップを負わせる価値はない」がコミュニティーの決定となりました。

解決案の議論

　解決案に的を絞ってまとめると以下のようになります。

①メディアクエリに対応できないブラウザはどれか？
②スタイル定義の順番とファイル構成をどうするか？
③メディアクエリのブレークポイント指定はどうするか？

①メディアクエリに対応できないブラウザ

　現在、iPhoneとAndroidを合わせた普及率は50%を超えます。
しかし、2010年頃の携帯電話事情は以下のようになります。

・iPhone 普及率はアメリカで6%
・ヨーロッパではわずか2%
・BlackBerry、NOKIA、SAMSUNG などが開発したフィーチャーフォンが主流

ブラウザ（Opera Mini、SymbianOSなど）は HTML5未対応です。
デスクトップ用サイトをズーム機能などで見やくする工夫はしています。
しかし、メディアクエリやviewportはサポートされていません。
進展国では現在も安いフィーチャーフォンが主流なため、ブラウザにRespond.jsのハンディキャップを負わせることは芳しくありません。

②スタイル定義の順番とファイル構成

　H5BPでは、以下ような順番でスタイルを定義することが提案されました。

1.メディアクエリなしで狭いビューポート用スタイルを定義
2.メディアクエリで他のデバイス用スタイルを定義
3.最後に IE6-8 用スタイルをコンディショナル・コメントで定義

従来は、スタイルシートをall-in-one（全てが一体）で設計していました。
それを、今度は適切なファイルに分割する事でRespond.jsを外すというアイディアです。
具体的には、以下のような方法です。

フィーチャーフォンに最も優しいタイプ

base.css：
最も狭いビューポート用スタイルと、全ブラウザ共通の基本スタイルを設定。
style.css：
最初にデスクトップ用をメディアクエリなしを設定。
残りをメディアクエリ付きで定義してIE6-8と共用可能にする。
※style.css をモバイルファーストで定義する場合、IE6-8 は専用にします。

<!-- 最も狭いビューポート用・全ブラウザ用基本スタイル -->
<link rel="stylesheet" href="base.css" media="all">
 
<!-- デスクトップ・ファーストで定義した広いビューポート用スタイル -->
<link rel="stylesheet" href="style.css" media="all and (min-width: 30em)">
 
<!-- IE6-8 向けのデスクトップ用スタイル（同一ファイル） -->
<!--&#91;if (lt IE 9) & (!IEMobile 7)&#93;>
<link rel="stylesheet" href="style.css" media="all">
<!&#91;endif&#93;-->

IE6-8に最も優しいタイプ

style.css：
最初に最も狭いビューポート用をメディアクエリなしで記述。
残りをメディアクエリ付きでモバイル・ファーストに定義する。
desktop.css：
IE6-8 専用のdesktop用スタイルを集約して定義する。

<!-- モバイル・ファーストで定義した IE6-8 以外のブラウザ用 -->
<!--&#91;if (gt IE 8) | (IEMobile 7)&#93;><!-->
<link rel="stylesheet" href="style.css">
<!--<!&#91;endif&#93;-->
 
<!-- IE6-8 向けのデスクトップ用 -->
<!--&#91;if (lt IE 9) & (!IEMobile 7)&#93;>
<link rel="stylesheet" href="desktop.css">
<!&#91;endif&#93;-->

上記の方法は、Sassで紹介されています。
→　sass