jsでブラウザのウィンドウ幅に応じたレスポンシブ設計してみた時に気づいた注意点まとめ

web制作

cssのレスポンシブ設計のように、jsでも、ウィンドウ幅の長さに応じた処理の使い分けが可能です。動作タイミングを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、もっと詳しくなりたい・・・。

本記事を気に入って頂けたら、facebookの「いいね!」を是非!

jsでブラウザのウィンドウ幅に応じたレスポンシブ設計してみた時に気づいた注意点まとめ


本記事のシェアはこちらから!

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

PROFILE

yoshi

本ブログ・WebMakeBlog KIYOTATSUを運営しているYoshiと申します。普段はWEB制作をやっています。得意なのは要件定義や構築で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。