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」は大文字・小文字の違いを無視するオプションです。
どちらでも、好きな方法でモバイル判定をしてください。