スクロールバーが表示される場合その幅を含んでしまうということです。

メディアクエリだけで、レスポンシブWebデザインを行うのであれば、ブレークポイントのずれがないので、問題ありません。

しかし、JavaScriptを一緒に使う場合は、注意が必要です。

jQueryでWindowサイズを取得する場合、このように書くことが多いと思います。

これだと、スクロールバーの幅が含まれていないので、15~20pxくらいメディアクエリと差が出てしまいます。

jQuery

if ( $(window).width() < 768 ){
     ...
}

レスポンシブで、メディアクエリとともにJavaScriptを併用するとき、メディアクエリ側でスクロールバーを含むのは変えられないので、JavaScript側で工夫する必要があります。

JavaScript側でどんな工夫ができるのか

それでは、JavaScript側でどんな工夫ができるのでしょうか?
以下のやり方が考えられます。

window.innerWidthを使う

こちらを使えば、スクロールバーの幅を含めた横幅の取得ができます。
IE8以下は、undefinedになります。

メディアクエリも、IE8以下で使えませんが、エラーにはなりません。
JavaScriptでも、エラーにならないようにしておきましょう。

JavaScript

if ( !window.innerWidth ){
    return;
}
if ( window.innerWidth < 768 ){
     ...
}

window.matchMediaを使う

メディアクエリのために機能なので、使い勝手は良さそうです。
残念ながらIE9以下では使えません

JavaScript

if( !window.matchMedia ){
    return;
}
if( window.matchMedia('(max-width:767px)').matches ){

}

IE9にも対応させたい場合は、matchmedia.jsという選択肢があります。

https://github.com/paulirish/matchMedia.js/

Modernizr(モダナイザー)を使う

Modernizr(モダナイザー)は、ユーザーが使用しているブラウザの機能を判定するライブラリです。
メディアクエリを判定する機能があるので、それを使います。

内部で、window.matchMediaが使われているのですが、他のModernizrの機能も使いたいということがあれば、こちらで良いですね。

JavaScript

if ( Modernizr.mq('(max-width: 767px)') ) {
    ...
}

Modernizr: the feature detection library for HTML5/CSS3

メディアクエリの値をJavaScriptで判定する

メディアクエリで切り替わった要素をJavaScriptで判定するという技があります。
これなら必ずブラウザの機能にあった挙動になりますが、複雑にブレークポイントを設定すると、面倒なことになりそうです。

CSS

@media only screen and (max-width: 767px){
    #breakpoint { width: 320px; }
}

jQuery

if ( $('#breakpoint').width() === 320 ){
        ...
}

まとめ

ツクメモでは、viewportを変更するくらいしか行っていないので、スルーしていましたが、意外と選択肢が多くてビックリしました。

クライアント案件では、しっかり設定していこうと思います。
では!

プロが教えるレスポンシブWebデザイン 現場のメソッド レイアウト・UIのマルチデバイス対応手法
笹尾 万里子 中村 真己 前川 昌幸
エムディエヌコーポレーション (2016-04-15)
売り上げランキング: 16,879