カテゴリー : Modernizr

Javascriptでブラウザを判定する方法

Javascriptで動作するサイトで、タブレット端末かPCかを判定する必要があったのでメモ。

Modernizrを使用しました。

Modernizrのサイトにアクセスし、ダウンロードボタンをクリックすると、

利用したい機能を選択する画面に遷移します。

Modernizr Download Builder

タブレット端末かPCかを判定したいのは、タッチイベントなのかマウスイベントなのかですので、
Misc.にあるTouch Eventsにチェックを入れます。
他にも利用したい機能がある場合は、チェックを入れます。

画面下部のGENERATE!をクリックするとソースが生成され、DOWNLOADボタンがクリックできるようになります。
HTMLファイルからダウンロードしたjsファイルを呼び出すように設定します。

Javascriptで以下のように書くだけで、タブレット端末(タッチデバイス)かの判定が可能です。

if (Modernizr.touch){
  //タブレット端末の処理
} else {
  //PCの処理
}

以下のサイトを参考にさせて頂きました。
JavaScript Library Archive様々なブラウザ環境に対応する為のJavaScriptライブラリ「Modernizr」
blog – NOBORU HIRABAYASHIブラウザの機能実装状況を確認するのにユーザーエージェントは使わないでModernizr.jsを使うといい