JavaScriptでスマホ・タブレットの判定方法を解説！
JavaScriptでスマホやタブレットを判定する方法をサンプルコード付きで解説します。スマホなのかタブレットなのかPCなのかを判定し処理を振り分けましょう。
JavaScriptでスマホ・タブレットの判定をしたい
JavaScriptではアクセスしてきた端末のユーザーエージェントを取得することが出来ます。ユーザーエージェントの中には利用しているOSやブラウザの情報が含まれていて、ユーザーエージェントを解析することでブラウザの判別が出来るようになります。
一方で今回はブラウザの種類ではなくスマホなのかタブレットなのかのデバイスの種類の判定をしていきたいと思います。
JavaScriptの処理の中でスマホのみに適用、タブレットのみに適用、あるいはPCのみに適用したい場合にはデバイスの種類の判定が必要になってきます。
今回そのやり方を解説していきます。
JavaScriptでスマホ・タブレットの判定をする方法
スマホ・タブレットを判定するやり方としていくつかありますので、それぞれサンプルコード付きで解説していきます。
ユーザーエージェントで判定する方法
まずはユーザーエージェントを取得し、その中の文字列を見て判定する方法です。一番シンプルな方法です。JavaScriptでもjQueryを利用している場合でも下記のやり方で実現することが出来ます。
上記のサンプルコードではdevice()という関数でユーザーエージェントからアクセスがmobileかtabletかdesktopのいずれのデバイスなのか判定しています。
スマホ判定
スマホ判定
if( device() === "mobile" ) {
// スマホのみの処理
}タブレット判定
タブレット判定
if( device() === "tablet" ) {
// タブレットのみの処理
}PC判定
PC判定
if( device() === "desktop" ) {
// PCのみの処理
}このようにdevice()の返り値を見てif文を書くだけでかなりシンプルに条件分岐ができるようになります。
デバイス判定のライブラリを使う方法
こちらも内部の仕組みは同じですが、外部のライブラリを使う方法です。ライブラリを使う場合は、JavaScriptのファイルサイズは少し重くなりますが、OSの種類やブラウザのバージョンなどより細かい情報を取得できたり、端末識別用のメソッドが追加されています。
今回紹介するのは下記のライブラリです。
使い方
今回はライブラリを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文を使って判断することも出来ますし、専用のライブラリも世の中には存在しています。どちらのやり方でもある程度正確に判定することが可能です。
ぜひお試し下さい。
