ブラウザの識別にMobile Detectが良い感じ

できればUserAgentを判別する処理は入れたくないんですが「iOSのSafariの時だけ○○したい」等のケースが出てきてしまったので使えるNPMがないか調べました。NPMは探せば何かしらありますね。

Mobile Detect

UserAgentを識別するパッケージはいくつかありますが、このMobile Detectがダウンロード数が多くて使われているようでした。

mobile-detect

PHPのMobile DetectというライブラリをNPMに移植したものらしいです。PHP版のメソッドが全てサポートされているわけではなさそうですが、メソッドの名称など使い勝手は似ているようです。

使い方

ブラウザで使う場合はwindow.navigator.userAgentをパラメーターに渡してインスタンスを生成します。md.mobile()とするとモバイル・デバイスだった場合に種類を示す文字列が返ってきます。デスクトップの場合はnullになります。

const MobileDetect = require('mobile-detect');
const md = new MobileDetect(window.navigator.userAgent);
const result = md.mobile(); // "iPhone"などの文字列

こちらにMobile Detectのデモサイトがあります。

Mobile-detect.js DEMO

iPhoneとiPadで試しにアクセスしてみました。

iPhoneの場合

iPadの場合

ついでにNexus6の場合

使えそうですね。良い感じです。