respond.js 使用時の注意点

先日対応したレスポンシブサイト制作の案件で使用した respond.js でハマった事があったので備忘録的にポストします。

https://github.com/scottjehl/Respond
[browser-shot width=”360″ url=”https://github.com/scottjehl/Respond”]

通常は<head>内でcssを読み込んだ後にrespond.jsをロードするのですが
Virtual PC 上のIE6, 7 で動作検証をしたところ、エラーが発生してページが全く表示されないケースが発生しました。
※エラー文言は失念してしまいました。。

 

とりあえずの解決方法としては</body>の直前でロードするようにしてロードのタイミングを遅らせる事で解決しました。
恐らくDOM構築のタイミングよりも早くrespond.jsが実行される事でうんたらかんたらがあったのではと推測しています。

 

という事で、respond.js を使用する場合は極力最後にロードするようにするのがベターなようです。

 

ちなみに respond.js って古めのIEで使用できないプロパティを使用できるようにするためのjsですが
DOMの構築後にむりやりページ全体を描きなおすような処理をするものです。

なので同じドメインの配下におかないとクロスブラウザの制限で実行できませんのでその点もご注意を。。
あ、なのでCDNなんかも無いかと思います。

が、無理にでもクロスドメインで使いたい場合は先のGithubかこちらをご参考にどうぞ。
http://stackoverflow.com/questions/14738247/respond-js-cdn-x-domain-setup