ウィンドウの幅を取得するならwindow.innerWidthがベター

ウィンドウの幅を取得する際にJQueryで
var windowWidth = $(window).width();
と書くことが多いと思いますが、この書き方だとスクロールバーの幅を含まないウィンドウの幅を取得します。 一方、CSSのメディアクエリで指定するウィンドウの幅はスクロールバーを含んでいるため、このコードを書いてしまうと、レイアウトが崩れてしまう原因になります。
<解決策>
したがって、下記のようにJavascriptで
var windowWidth = window.innerWidth;
と書くのがベターです。こうすることでメディアクエリとJavascriptで取得するウィンドウ幅のズレを解消でき、レイアウトの崩れを回避することができます。
<注意点>
一点、注意していただきたいのは、IE8ではこの記述が使えないことです。そのため、IE8への対応が必要な案件では、一部レイアウトが崩れてしまいますが、IEに対する条件付きコメントを書いて、IE8以下の場合のみ$(window).width();で幅を取得するようにするといいでしょう。
<!--[if lte IE 8]>適用内容<![endif]-->
<参考サイト>
スクロールバーの表示・非表示の設定(Mac)
Mac – スクロールバーの表示・動作設定
   

コメントを残す

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