WEB系キャンパス

レスポンシブのサイトの場合のjQueryのスマホとPCで切り替える方法

スマホとPCを1ソースで管理するレスポンシブの場合、jQueryのスクリプをPCの場合とスマホの場合でプロパティ値を変えたい場合があります。
jQueryのライブラリなどは、あらかじめレスポンシブ用のコードが用意されてたりしますが、ライブラリを使わない場合は、自分で用意しないといけません。

【1】ユーザーエージェントで切り替える方法

$(function () {
    var ua = navigator.userAgent;
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {

        // スマホ用のスクリプトはここに

    } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {

      // タブレット用のスクリプトはここに

    } else {

      // PC用のスクリプトはここに

    }
})

【2】ウィンドウ幅で切り替える方法

$(window).on('load resize', function(){
  var winW = $(window).width();
  var devW = 767;
  if (winW <= devW) {

     // スマホ用(767px以下)のスクリプトはここに

  } else {

// PC用(768px以上)のスクリプトはここに

  }
});

※jQueryはページが読み込まれた時に発動するので、ウインドウ幅を縮めただけでは、上記のコードでは何も変わりません。リロードをするか、chromeの検証でスマホ版を確認するなどして、表示確認する必要があります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です