【jQuery】デバイスのサイズによってPCとSPのjsを分ける方法

デバイスによってcssやjsを分けたいという要望も多いかと思います。

cssであればメディアクエリーで幅によってスタイルを分けることが可能です。

jsを分けたいときの一つの方法としてはデバイスの幅を取得してそれによって処理を分けるという方法があります。

たとえばデバイスの幅が667px以下の場合はスマホ用のjsを実行する。

もし667px以上である場合にはPCやタブレット用のjsを実行するといった形になります。

デバイスのサイズによってPCとSPのjsを分ける方法

ページが読み込まれたときに実行する

jQuery

jQuery(window).on('load',function(){
        var ww = jQuery('body').width();
        //PC
        if (ww >= 667) {
		//PC、タブレットの処理
        }
       
        //SP
        if (ww < 667) {
		//スマホの処理
        }
}); 

何らかのイベントが実行されたとき

次は何かしらのイベントが実行されたときの切り分けになります。

下はbuttonをクリックしたときの処理になります。

デバイスの幅が667px以下のときにクリックするとスマホの処理を実行してデバイスの幅が667px以上のときはPC、タブレットの処理を実行します。

jQuery(function() {
        var ww = jQuery('body').width();
        //PC
        if (ww >= 667) {
		jQuery('button').click(function() {
			//PC、タブレットの処理
		});
        }
       
        //SP
        if (ww < 667) {
		jQuery('button').click(function() {
			//スマホの処理
		});
        }
});

上記の方法を使うことでPCやタブレットで見ているときとスマホで見ているときのjsの処理を分けることができます。

1つめに紹介した読み込み時の処理は完全なレスポンシブではないのでPCで開いてスマホサイズにしても処理は行われません。

あくまで読み込み時のみになります。

レスポンシブにするためにはデバイスの幅が変わったら実行する記述が必要になります。

PCのときはPCのサイズで閲覧してスマホのときはスマホサイズでしか閲覧しない場合には上記の方法が使えると思います。

サンプル