JavaScriptでスマホ・タブレットの判定方法を解説!

JavaScriptでスマホやタブレットを判定する方法をサンプルコード付きで解説します。スマホなのかタブレットなのかPCなのかを判定し処理を振り分けましょう。

コンテンツ [表示]

  1. 1JavaScriptでスマホ・タブレットの判定をしたい
  2. 2JavaScriptでスマホ・タブレットの判定をする方法
  3. 2.1ユーザーエージェントで判定する方法
  4. 2.2デバイス判定のライブラリを使う方法
  5. 3まとめ

JavaScriptでスマホ・タブレットの判定をしたい

JavaScriptではアクセスしてきた端末のユーザーエージェントを取得することが出来ます。ユーザーエージェントの中には利用しているOSやブラウザの情報が含まれていて、ユーザーエージェントを解析することでブラウザの判別が出来るようになります。

JavaScriptでブラウザ判定する方法を解説!のイメージ
JavaScriptでブラウザ判定する方法を解説!
JavaScriptでChromeやSafari、Internet Explorerなどのブラウザを判別する方法をサンプルコード付きで解説していきます。ユーザーエージェントからブラウザ判別をしましょう。

一方で今回はブラウザの種類ではなくスマホなのかタブレットなのかのデバイスの種類の判定をしていきたいと思います。

JavaScriptの処理の中でスマホのみに適用、タブレットのみに適用、あるいはPCのみに適用したい場合にはデバイスの種類の判定が必要になってきます。

今回そのやり方を解説していきます。

JavaScriptでスマホ・タブレットの判定をする方法

スマホ・タブレットを判定するやり方としていくつかありますので、それぞれサンプルコード付きで解説していきます。

ユーザーエージェントで判定する方法

まずはユーザーエージェントを取得し、その中の文字列を見て判定する方法です。一番シンプルな方法です。JavaScriptでもjQueryを利用している場合でも下記のやり方で実現することが出来ます。

上記のサンプルコードではdevice()という関数でユーザーエージェントからアクセスがmobiletabletdesktopのいずれのデバイスなのか判定しています。

スマホ判定

スマホ判定

if( device() === "mobile" ) {
  // スマホのみの処理
}

タブレット判定

タブレット判定

if( device() === "tablet" ) {
  // タブレットのみの処理
}

PC判定

PC判定

if( device() === "desktop" ) {
  // PCのみの処理
}

このようにdevice()の返り値を見てif文を書くだけでかなりシンプルに条件分岐ができるようになります。

デバイス判定のライブラリを使う方法

こちらも内部の仕組みは同じですが、外部のライブラリを使う方法です。ライブラリを使う場合は、JavaScriptのファイルサイズは少し重くなりますが、OSの種類やブラウザのバージョンなどより細かい情報を取得できたり、端末識別用のメソッドが追加されています。

今回紹介するのは下記のライブラリです。

mobile-detect.js | Device detection (phone, tablet, desktop, mobile grade, os, versions)
Device detection (phone, tablet, desktop, mobile grade, os, versions)

使い方

今回はライブラリをCDNから利用してみたいと思います。

mobile-detect.jsをCDNから読み込み、new MobileDetect(window.navigator.userAgent);とします。

スマホ判定

スマホ判定

var isMobile = md.phone();
if( isMobile ) {
  // スマホのみの処理
}

// あるいは

if( md.phone() ) {
  // スマホのみの処理
}

タブレット判定

タブレット判定

var isTablet = md.tablet();
if( isTablet ) {
  // タブレットのみの処理
}

// あるいは

if( md.tablet() ) {
  // タブレットのみの処理
}

PC判定

PCの場合は専用のメソッドがないため、スマホとタブレット以外の場合とします。

PC判定

var isMobile = md.phone();
var isTablet = md.tablet();
if( !isMobile && !isTablet ) {
  // PCのみの処理
}

// あるいは
if( !md.phone() && !md.tablet() ) {
  // PCのみの処理
}

まとめ

いかがでしたでしょうか。JavaScriptでスマホなのかタブレットなのか判定する方法を解説してきました。

シンプルにユーザーエージェントからif文を使って判断することも出来ますし、専用のライブラリも世の中には存在しています。どちらのやり方でもある程度正確に判定することが可能です。

ぜひお試し下さい。

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次