ie8をレスポンシブとセレクタに対応させるjavascript

ie8でもレスポンシブとセレクタを使えるようにしたい!

ちょっと調べてみたら「javascriptを入れれば何とかなりそうだ」ということでやってみたんです。

レスポンシブ対応
respond.js

セレクタ対応
selectivizr.js

これが定番のようです。

ところが、いざ設置してみたらメディアクエリの中にあるセレクタには効いてくれないですよ。

調べてみたら、本家のselectivizr.jsはバージョンが1.0.2なのですが、GitHubにあるselectivizr.js v1.0.3bを使えば効くとか。
ダウンロード先がよくわかりませんでしたが、私が落としたのはここ

しかし、入れてみたけどやっぱり効かない!!

あれこれ試していたら動きました!!!

javascriptを読み込ませる順番があるんですね。

<link href="/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- [if lt IE 9]>
<script src="/js/html5shiv.js" type="text/javascript"></script>
<script src="/js/selectivizr.js" type="text/javascript"></script>
<script src="/js/respond.js" type="text/javascript"></script>
<![endif]-->

1行目 cssは真っ先に読み込ませます。
2行目 selectivizr.jsを使うには必須です。
3行目 ie8以下に適用する
4行目 ie8をhtml5に対応させるjavascript。レスポンシブするくらいだからhtml5でね。
5行目 ie8をセレクタに対応させるselectivizr.js。respond.jsより先に読み込ませる必要があります。
6行目 ie8をメディアクエリに対応させるrespond.js。

今回は5行目、6行目の順番ではまりましたよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です