jsでレスポンシブ設計！ブラウザのウィンドウ幅に応じて可変させる方法

jsでは、cssのレスポンシブ設計のように、ウィンドウ幅の長さに応じた処理の使い分けも可能です。動作タイミングをload resizeの記述にすることで、ブラウザのウィンドウサイズが変更された時に処理出力を分けることができます。

ソースコードの紹介

    $(window).on('load resize', function() {

      var windowWidth = window.innerWidth;

      if (windowWidth > 960) {
      // ********** PCの記述 ********** //

      } else if (windowWidth > 767) {
      // ********** tabletの記述 ********** //

      } else {
        // ********** SPの記述 ********** //
      }

    });

ただ、リサイズ動作を繰り返すと、「PCの記述⇒tabletの記述⇒スマホの記述⇒tabletの記述⇒PCの記述...以下ループ」とした時、同じjsの記述を何度も読み込んでしまう問題があります。この時、PCの記述とSPの記述などで、同じ要素に対して違う命令をしていると、両方が混ざってきて、ヘンな動作になったり、あるいは同じクリック要素などについては動かなくなってしまう時があります。

対処法の一つとして、リサイズで処理が切り替わった瞬間、リロードしてしまって、古いファイルをクリアして、新たに読込しなおす荒業もあります。

    $(window).on('load resize', function() {

      var windowWidth = window.innerWidth;

      if (windowWidth > 960) {
        // ********** リロードでクリア ********** //
        if (window.name != "pc"){
          location.reload();
          window.name = "pc";
        }
      // ********** PCの記述 ********** //

      } else if (windowWidth > 767) {
        // ********** リロードでクリア ********** //
        if (window.name != "tablet"){
          location.reload();
          window.name = "tablet";
        }
      // ********** tabletの記述 ********** //

      } else {
        if (window.name != "sp"){
          location.reload();
          window.name = "sp";
        }
        // ********** SPの記述 ********** //
      }

    });

▼引用リンク：jsで1回だけリロードさせる
http://www.openspc2.org/reibun/javascript/link/017/index.html

ただ、この時の難点は、サイズが切り替わるところでリロードとなるので、パチンっと画面が点滅したような処理が見えてしまうところが見苦しいです。また、お問合せフォームなどがあるページでは、もしユーザーが入力情報を途中まで入れていたところでウィンドウ幅を切り換えたりすると、そのフォーム情報が全てクリアになってしまいます。

・・・というか、そもそもリロードさせる記述があるって、なんだかSEO的にも悪そうだし、なんとも残念な仕様ですね。

結論としては、jsのreload resizeの使用は、あんまり推奨しません。できる限り、１つのjsファイルで、レスポンシブの各種デバイスに対応する記述を一元的に書けるように工夫したほうが良いです。

また、スマホ画面と、タブレット以上のサイズにおいて、ゴリゴリとjs記述を書き分けたいのであれば、レスポンシブはレスポンシブでも、ブラウザサイズを縮小した時にスマホ画面はならないように切り分けちゃったほうがいです。（ブラウザのウィンドウ縮小に併せて、ゴリゴリ動作をする完璧なjsを1ファイルで書くのは、かなり至難の業です。）