2022/08/06

【jQuery】スマホ＆タブレットとPCを判別して別のJavaScript(jQuery)を実行させる

スマホ＆タブレットとPCで別のJavaScriptを実行させる

JavaScriptでスマホ＆タブレットとPCの判別は、ウィンドウサイズとユーザーエージェントで判別する方法があるが、ウィンドウサイズの方だとうまくいかなかったので今回はユーザーエージェントで判別する方法を。

スマホ＆タブレットとPCの判別

$(function () {
  const ua = navigator.userAgent;
  if (ua.indexOf('iPhone') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1) || ua.indexOf('iPad') > -1 || ua.indexOf('Android') > -1) {
    // スマホ＆タブレット用イベント
    $(".spoiler_info").stop().hide();
    //ボタンのイベント
    $(".spoilerBtn_info").on('click', function () {
      $(this).next().stop().slideToggle();
      $(this).toggleClass("active");
    })
  } else {
    // PC用イベント
  }
});

スマホ＆タブレット判別ロジック

// iPhone でアクセスした場合
const ua = navigator.userAgent;
console.log(ua.indexOf('iPhone')); // 13
console.log(ua.indexOf('Android')); // -1

スマホ＆タブレット判別ロジックは、UserAgent文字列に特例の文字列が含まれているかどうかで判断している。

.indexOf()メソッドを使用することによって、特定の文字列が含まれている場合を判断できるようになっている。

スマホやタブレットからアクセスされると必ず「-1」か「0」以上の数値が返ってくるので、「-1」より大きいかどうかで条件分岐すればOK。

また、.indexOf()ではなく.search()や.matchメソッドを使用しても大丈夫みたい。

省略形

const ua = navigator.userAgent;
const isSp = (ua.indexOf('iPhone') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1));
const isTablet = (ua.indexOf('iPad') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') == -1));
const isPc = (! isSp && ! isTablet);

if (isSp) {
    // スマホの処理
}
if (isTablet) {
    // タブレットの処理
}
if (isPc) {
    // PCの処理
}

「インドア生活のすすめ」の記事を参考にしました。

READ MORE IN BLOGS