jQuery 画面サイズに合わせてスクリプトを実行する方法

公開日

by Takumi Hirashima

jQuery で画面サイズに合わせてスクリプトを実行する方法を紹介します。
例えば、レスポンシブサイトで画面サイズに合わせたスクリプトを実行したい時に便利な方法です。

  1. 画面サイズに合わせてスクリプトを実行する方法

画面サイズに合わせてスクリプトを実行する方法

画面サイズに合わせてスクリプトを実行する場合は window.matchMedia を使用します。
例えば、画面サイズ640px以上でスクリプトを実行したい場合、次のコードを追加します。

$(function(){

  if (window.matchMedia('(min-width:639px)').matches) { // PC：画面サイズが 640px以上なら実行

    // -- 省略 --

  } else { // SP：画面サイズが 639px以下なら実行

    // -- 省略 --

  };

});

まとめ

jQuery で画面サイズに合わせてスクリプトを実行する方法を紹介しました。