JavaScriptでスマホ判定する2つの方法
- 2020.01.10
- JavaScript
Webページを閲覧しているデバイスがスマホかどうかをJavaScriptで判定するには、様々な方法があります。
UserAgent文字列から判定するのが代表的な方法ですが、ブラウザサイズから判定する方法や、デバイス判定ライブラリを使う方法もあります。
しかしながら、UserAgentはOSやブラウザのバージョンアップによって変更されたり、デバイス判定ライブラリによっては日本で発売されている端末に対応していなかったりと、注意すべき点もあります。
そこで今回は、日本で利用されているスマホを対象として、Javascriptで正しくスマホ判定するための方法を2つ解説します。
前提条件
スマホの定義としては、以下のデバイスとします。
- Android 搭載端末(Android 5.0 以上)
- iPhone(iOS 10以上)
- iPod / iPod touch(iOS 10以上)
また、ブラウザで「PCサイト表示モード」に設定しているときは、スマホと判定させないものとします。
UserAgentからスマホ判定する方法
スマホ判定ロジック
UserAgent が以下のいずれかの場合、スマートフォンと判定できます。
- iPhoneを含む
- Android と Mobileを含む
JavaScriptコードは以下のようになります。
function isSmartPhone() {
if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
return true;
} else {
return false;
}
}
UserAgentの例
上記の判定コードで正しく判別されるか、確認してみます。
スマホの各種ブラウザのUserAgentは、いずれも上記判定条件に合致します。
機種 | UserAgent |
---|---|
iPhone (Chrome) | Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/79.0.3945.73 Mobile/15E148 Safari/604.1 |
iPod touch (Safari) | Mozilla/5.0 (iPod touch; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Mobile/15E148 Safari/604.1 |
HUAWEI P10 Lite(Chrome) | Mozilla/5.0 (Linux; Android 7.0; WAS-LX2J) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.116 Mobile Safari/537.36 |
HUAWEI P10 Lite(Firefox) | Mozilla/5.0 (Android 7.0; Mobile; rv:68.0) Gecko/68.0 Firefox/68.0 |
HUAWEI P10 Lite(Opera Mini) | Mozilla/5.0 (Linux; U; Android 7.0; WAS-LX2J Build/HUAWEIWAS-LX2J; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/77.0.3865.116 Mobile Safari/537.36 OPR/46.0.2254.145391 |
HUAWEI P10 Lite(UC Browser) | Mozilla/5.0 (Linux; U; Android 7.0; en-US; WAS-LX2J Build/HUAWEIWAS-LX2J) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.108 UCBrowser/12.13.5.1209 Mobile Safari/537.36 |
一方、以下のようなタブレットのUserAgentは、スマホと判断されません。
機種 | UserAgent |
---|---|
iPad(Safari) | Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Mobile/15E148 Safari/604.1 |
Nexus 9 (Chrome) | Mozilla/5.0 (Linux; Android 7.1.1; Nexus 9) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36 |
また、スマホでデスクトップサイト表示を行った場合のUserAgentも、条件には当てはまらないため、スマホと判断されません。
機種 | UserAgent |
---|---|
iPhone (Safari デスクトップ版サイト表示) | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Safari/605.1.15 |
HUAWEI P8 Lite (Chrome デスクトップ版サイト表示) | Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.136 Safari/537.36 |
HUAWEI P8 Lite (Firefox デスクトップ版サイト表示) | Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0 |
考慮しなくてもよいUserAgent
次のUserAgentもスマホで使われるものになりますが、いずれもJavaScript が実行される時には使用されないため、判定ロジックでは考慮不要です。
MobileSafari/
から始まるUserAgent:Safariが faviconを取得するときに使用されるDalvik/
から始まるUser-Agent:AndroidアプリがHTTPリクエストを送信するときに使用される
また、 Opera/
から始まるUserAgentもOpera 12(2016年)まで使われていましたが、Opera 13からは Mozilla/
から始まるUserAgentに変更されています。Operaのシェアも数パーセントであることを考えると、Opera 12以前の古いUserAgentは無視して問題ないと思われます。
デバイス画面幅からスマホ判定する方法
メディアクエリ関数で判別
window.matchMedia()
関数を使うと、デバイス画面幅(ビューポート幅)で判定できます。matchMedia
関数は max-width: 640px
のようなメディアクエリ文字列を引数に指定することで、メディアクエリにマッチしているかどうかを評価できます。
window.matchMedia – Web API | MDN
この関数のカバー率は98%で、IE 10やAndroid 4を含む、ほとんどのブラウザで使えます。
https://caniuse.com/#feat=matchmedia
JavaScriptコードは以下のようになります。
デバイス幅が640px以下の場合にスマホと判定するようにしています。
function isSmartPhone() {
if (window.matchMedia && window.matchMedia('(max-device-width: 640px)').matches) {
return true;
} else {
return false;
}
}
メディアクエリ関数のメリット
この方法が便利なのは、スマホかどうかという条件より、ビューポート幅によってUIを変更したいときです。
たとえば、jQuery UIのDatePickerウィジェットで、表示する月数をビューポート幅によって切り替えできます。
UserAgentでも同じような切り替えが可能ですが、matchMedia関数を使うと480px, 720px, 1024px など複数のブレイクポイントを使って、ブラウザ幅に応じた月数に設定できます。
まとめ
JavaScriptでスマホ判別する方法を2つ紹介しました。
スマホかどうかの判定は簡単にできるので、ぜひ使ってみてください。