スクロールバーが表示される場合その幅を含んでしまうということです。
メディアクエリだけで、レスポンシブ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を変更するくらいしか行っていないので、スルーしていましたが、意外と選択肢が多くてビックリしました。
クライアント案件では、しっかり設定していこうと思います。
では！
エムディエヌコーポレーション (2016-04-15)
売り上げランキング: 16,879
コメント