JavaScript - モバイル判定（スマホ・タブレット・PC）

JavaScriptによるモバイル判定の方法を紹介。スマホ・タブレット・PCを区別します。

判定方法はいくつかありますが、 ここではindexOf()メソッドを使う場合と、 match()メソッドを使う場合を紹介。

いずれの方法も「navigator.userAgent」の値から判別します。

indexOf()をによるモバイル判定

次の関数はスマホ・タブレット・PCのいずれかを判別するための関数です。

// "sp"、"tab"、"pc"　のいずれかを返す関数
function get_device() {
  var ua = navigator.userAgent;

  if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
    return 'sp';
  } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Silk') > 0 || ua.indexOf('Kindle') > 0 || ua.indexOf('Android') > 0) {
    return 'tab';
  } else {
    return 'pc';
  }
}

Androidの場合はスマホとタブレットの両方の可能性があります。 ですから、「Android かつ Mobile」の場合はスマホ、 「Android」の場合はタブレット端末とします。

「Silk」はKindleの場合に含まれる文字列なのでタブレットとします。

match()によるモバイル判定

// "sp"、"tab"、"pc"　のいずれかを返す関数
function get_device() {
  var ua = navigator.userAgent;
  console.log(ua);
  if (ua.match(/(iPhone|iPod|Android.*Mobile)/i)) {
    return 'sp';
  } else if (ua.match(/iPad|Android|Silk|Kindle/i)) {
    return 'tab';
  } else {
    return 'pc';
  }
}

最初のindexOf()を使う方法よりも、 今回のmatich()を使う方がコードは見やすくなります。

match()メソッドの最後の「i」は大文字・小文字の違いを無視するオプションです。

どちらでも、好きな方法でモバイル判定をしてください。