【jQuery】PCとスマホのIEやGoogle chromeなどのブラウザをユーザーエージェントで判別する

IEやGoogle chrome、Firefoxなどのブラウザをユーザーエージェントで判別し、処理を振り分ける方法、ついでにスマホ判別も

jQuery関連記事

• 

  【jQuery】pdfが存在するか、mimeタイプのバリデーションする

• 

  jQuery UIのsortableを使ってリストをドラッグで並び替える

• 

  jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する

• 

  HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる

• 

  bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種

• 

  bxSliderの使い方と、オプションでのカスタマイズ方法

• 

  select・optionタグをjQueryで、プルダウンの選択値を取得、変更する

• 

  jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する

• 

  jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる

ユーザーエージェントを順番に判別していく

JavaScript

var UAPC = window.navigator.userAgent.toLowerCase();
if(UAPC.indexOf('msie') != -1 || UAPC.indexOf('trident') != -1) {
    var ua = 'IE';
} else if(UAPC.indexOf('edge') != -1) {
    var ua = 'Edge';
} else if(UAPC.indexOf('chrome') != -1) {
    var ua = 'Google Chrome';
} else if(UAPC.indexOf('safari') != -1) {
    var ua = 'Safari';
} else if(UAPC.indexOf('firefox') != -1) {
    var ua = 'FireFox';
} else if(UAPC.indexOf('opera') != -1) {
    var ua = 'Opera';
} else {
    var ua = '不明';
}

userAgent関数でブラウザのユーザーエージェントを取得します。
それにブラウザ判定しやすいようにtoLowerCase()で小文字に変換してます。

ユーザーエージェントの中にindexOfで判別用の文字列が含まれているかで判定しています。

IEの判別

IEの判別にはmsieとtridentが入っているかで調べれます。
Edgeの場合はedgeですね。

これで厄介なIEだけに追加処理ができるようになります。

バージョンの判定もできますが特に今回は必要なかったので調べてません。

スマートフォン、タブレットの判別

JavaScript

var UASP = window.navigator.userAgent.toLowerCase();
if(UASP.indexOf('iphone') != -1) {
    var ua = 'iPhone';
} else if(UASP.indexOf('ipad') != -1) {
    var ua = 'iPad';
} else if(UASP.indexOf('android') != -1) {
    if(UASP.indexOf('mobile') != -1) {
        var ua = 'android スマホ';
    } else {
        var ua = 'android タブレット';
    }
} 

これでスマホ、タブレットの判別ができます