respond.jsを使用してIE8まで対応させたレスポンシブサイトを制作したときに困ったことがあったのでメモ

respond.jsとは

IE8以下では使用できないMedia queryによるブレイクポイントを使用できるようにしてくれるライブラリです。

scottjehl/Respond · GitHub

JavaScriptでviewportを取得するには?

viewportの値によってJavaScriptの切替したい場合はwindow.innerWidthをつかって幅を取得します。

window.innerWidth - Web API インターフェイス | MDN

window.innerWidthの幅はスクロールバーも含めたウインドウの内側の長さ(viewport)です。 PCの場合CSS Media Queryでブレイクポイントを指定した場合、この長さを基準に幅が変わります。

ただしIE8はviewportをサポートしていません。そのためundifinedが返ってきます。

IE8以下の対応策

respond.jsをよくよく調べてみるとどうやら空のdivをbodyの最後に追加してその幅を判定して切り替えを行っているようです。(間違っていたらごめんない…) なのでdocument.body.clientWidthを使ってウインドウの内側を取得すればIE8でも対応できます。

var windowWidth = (window.innerWidth) ? window.innerWidth : document.body.clientWidth;

下記のコードはwindow.innerWidthを判定してtrueであればwindow.innerWidthを、falseであればdocument.body.clientWidthを取得してくるようになっています。

今回はこの方法で対応しましたが、やっぱりサポートしてないものをなんとかしようとするとその分やること増えるので難しいなって思いました。 何かもっと良い方法、効率のいい方法あればぜひ教えてください。