ウィンドウサイズによって表示させるファイル（フォルダ）を切り替える方法

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

という方のお悩みを解決します！

今回、紹介するサンプルコードはぼくが以前、実際のWebサイト制作案件で使用したものです。

レスポンシブ対応をする際は通常、CSSのメディアクエリを使いますよね。

しかし、PC版とスマホ版のデザインがあまりにも異なっているときに、別々のファイルでコーディングしたほうが管理しやすい場合があります。

＊めったにそんな機会ないですが笑

コーディングした後は、「pc」「sp」といった感じでフォルダごと分けて、任意のウィンドウサイズより小さい場合は「sp」を、大きい場合は「pc」のほうを表示させる処理をJavascriptで書きます。

どういうコードを書けば実現できるか悩んでいる方のお役に立てれば幸いです。

PC版からスマホ版へ切り替える

PC版のファイル（index.html）に記述するJavascritのコードです。

ブラウザのウィンドウサイズが変更されたときに発生するresizeイベントを駆使して実装します。

var url = "";
$(window).on('resize', function(){
  // 480px未満（スマホ）のときに、URLをspフォルダのほうへ切り替える
  if ($(window).width() < 480) {
    url = "../sp/";
    window.location = url;
  }
});

スマホ版からPC版へ切り替える

スマホ版のファイル（index.html）に記述するJavascritのコードです。

var url = "";
$(window).on('resize', function(){
  // 480pxより大きい（PC、タブレット）ときに、URLをpcフォルダのほうへ切り替える
  if ($(window).width() > 480) {
    url = "../pc/";
    window.location = url;
  }
});

まとめ

以上、Javascriptでウィンドウサイズによって表示させるファイルを切り替える方法を紹介しました。

ほんとの本当ににたまーーにしか使わない小技ですが、知っておいて損はないでしょう。

Web制作案件を受けるときは不安材料はできるだけ少ないほうがいいので、他の記事も読んでどんどんコーディングのレベルアップをはかっていきましょう！

コーディングスキルアップシリーズはこちら！