コードリファレンス

その他
この記事を読むのにかかる時間 1未満 分

画面幅に追従するレスポンシブ実装

[HTML]

<link rel="stylesheet" href="styles.css" />
<div class="container">
  <div class="blur-layer"></div>
  <div class="content">
    <p>テスト</p>
  </div>
  <script
    src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"
  ></script>
  <script src="function.js"></script>
</div>

[JQuery]

$(function(){
  var w = $(window).width();
  var w_resize;
  var timer = false;

  aaa();

  $(window).on("orientationchange resize",function(){
    if(timer){
      clearTimeout(timer);
    }
    // aaa()
    timer = setTimeout(function(){
      w_resize = $(window).width();
      if(w != w_resize){
        aaa();
        w = w_resize;
      }
    },200);
  });

  function aaa(){
    console.log("テストです")
  }
});

◼︎気をつけるポイント

・画面幅を狭くした時にスライダーに切り替える処理など、js処理の条件に画面幅を指定している場合はresizeイベントを使用します。

・resizeイベントは画面幅を変更すると発火→ドラッグなどで連続的に画面幅を変更しても発火してしまいます。これはsetTimeoutイベントを用いることで改善されます。setTimeoutイベントを実装する場合はclearTimeoutイベントも合わせて実装します。

・スマホではページスクロール時にリサイズが走ってしまいます。そのため、resizeイベント内で条件分けが必要になる場合があります。

参考サイト
【jQuery】レスポンシブサイトで悩まされるスマホ対応の注意点
https://tada-fla.com/blog/20160113/smp-attention-resize

・slick sliderでは、画面幅を変更する前に生成したスライダーの要素が残ったままになる場合があります。そのため、slick(‘unslick’)を使ってイニシャライズを組み込みます。