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

IT/web

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の使用は、あんまり推奨しません。できる限り、1つのjsファイルで、レスポンシブの各種デバイスに対応する記述を一元的に書けるように工夫したほうが良いです。

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

最後に一言

js、もっと詳しくなりたい・・・。

この記事をSNSでシェアする?

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


  • 2
    このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

KIYOTATSU(キヨタツ)を運営しているウェブ制作者のYoshiです。得意な分野はディレクションとコーディングです。デザインはシンプルなものだけ可能です。他、色々と随時習得中です。