マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。

フロントエンドの方なら馴染みのある言葉「メディアクエリ」。
昨今のレスポンシブサイトは、大体がこのメディアクエリを使って、指定した画面幅によってスタイルを変える仕組みを利用して作られています。
CSSの記述で制御するこの作りですが、JSを利用しても同じようなことができます。
今回はその備忘録ということで、ちょこっとご紹介。

JSで画面幅を取得する方法はいくつかあります。
そのどれもがメディアクエリで画面幅判定をする時と同等の処理になるわけではありません。注意。

①と②は微妙に似ていますが、そもそも記法が違ったりと結構ややこしいです。
例えば、①のwindowを$(window)と書いても値は取れません。innerWidthはjavascriptの記述なので。
実はjQueryにもinnerWidth()は存在するのですが、用法や用途が違うので間違えないようにご注意ください。

というわけで、メディアクエリを利用した時と同様の処理を作るためには、①のwindow.innerWidth;を利用して条件分岐すればいいわけです。
スマートフォンのときだけ特定の箇所をスライダー化したい・・・なんて時に使えると思いますよ。
逆に②の$(window).width();を使ってしまうと、

「あれ？スライダーの部分はちゃんとスライダー化するけど、他の要素がスマートフォン表示にならないぞ・・・？」

なんてことになってしまうので、要注意です。

以上、虎澤でした。