JavaScriptでwindowの幅による条件分岐を作る方法

サイト構築をしていると様々な場面で条件分岐が必要になることがありますよね。特にレスポンシブデザインになってからはウィンドウ幅による条件分岐をよく使います。

CSSであればメディアクエリーでやればいいのですが、JavaScriptの場合にはどうしていますか？普通にウィンドウ幅を取得して分岐ということが多いかと思いますが、今回は私なりの方法をご紹介します。

まず正確なウィンドウ幅を取得します。

ウィンドウ幅を取得するにもスクロールバーを含めたり含めなかったりと色々な方法がありますが、今回はCSSのメディアクエリーの反応と同じにするため、スクロールバーを含めた値を取得することにします。ここが間違っているとその先が全部狂ってしまうので、以下の記述で正確な値を取得しましょう。

$windowWidth = window.innerWidth;

javascriptでのwindow.innerWidthで取得するかjQueryの$(window).width();で取得する方法もありますが、このjQueryの方はスクロールバーを含めない値を取得することになりますので、javascriptでのwindow.innerWidthで取得します。

ここで取得したウィンドウ幅の変数をそのままダイレクトに使ってもいいのですが、少し加工していきます。

PCサイズ、タブレットサイズ、モバイルサイズの変数に振り分ける。

サイトによってブレイクポイントは様々ですが、今回の場合は480px/768pxで設定し、480以下はモバイル、480以上768以下はタブレット、768以上はPCという構造にしてみます。

$windowWidth = window.innerWidth;

$breakPointA = 480;
$breakPointB = 768;

isMobileSize = ($windowWidth < $breakPointA);
isTabletSize = ($windowWidth <= $breakPointB) && ($windowWidth > $breakPointA);
isPcSize = ($windowWidth > $breakPointB);

このように記述することで、isMobileSize/isTabletSize/isPcSizeという三つの条件を作ることができました。条件分岐の度に数値を書いたりせずに解りやすく使うことができます。

if(isMobileSize){
//モバイルサイズの場合の記述
}

if(isTabletSize){
//タブレットサイズの場合の記述
}

if(isPcSize){
//PCサイズの場合の記述
}

 

いかがでしょうか。

今や大きいスマホや小さいタブレットなど、あるいはタブレットPCというものもあるので、モバイル/タブレット/PCという棲み分けが古い考えになってきていると思いますので、スモール/ミドル/ビッグなどでもいいかもしれませんね。