JavaScriptでスマホ判定する2つの方法

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は、スマホと判断されません。

また、スマホでデスクトップサイト表示を行った場合のUserAgentも、条件には当てはまらないため、スマホと判断されません。

考慮しなくてもよい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は無視して問題ないと思われます。

ChromeのUserAgent文字列削減の影響

UserAgent文字列は、今後フォーマットの変更が予定されています。

たとえば、Galaxy A20の場合は、次のようになります。

ただ、User-AgentにAndroidやMobileといった文字列が含まれることに変わりはありません。そのため、先ほど紹介した判定コードでも問題なく判別できます。

• 関連記事：Chrome の User-Agent 文字列削減に関する最新情報

デバイス画面幅からスマホ判定する方法

メディアクエリ関数で判別

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 など複数のブレイクポイントを使って、ブラウザ幅に応じた月数に設定できます。

User-Agent Client Hintsからスマホ判定する方法

その他の方法として、User-Agent Clients Hints APIを利用する方法もあります。

これはUser-Agent文字列を解析する代わりに利用できるJavaScript APIです。

以下のコードでスマホ判定ができます。

function isSmartPhone() {
  if (navigator.userAgentData && navigator.userAgentData.mobile) {
    return true;
  } else {
    return false;
  }
}

ただ、ブラウザカバー率が67%と低いので、現時点ではUser-Agentでの判定を行う必要があります。

• https://caniuse.com/mdn-api_navigator_useragentdata

まとめ

JavaScriptでスマホ判別する方法を2つ紹介しました。
スマホかどうかの判定は簡単にできるので、ぜひ使ってみてください。