JavaScriptでUserAgentによるブラウザ判定「if.useragent.js」v0.9

カテゴリ:WEB技術, フリー(プログラム) タグ:, ,
閲覧数: 18,362 views
公開日:2013年3月1日

昨今はクロスブラウザ対応が非常に多く求められますので、もうユーザーエージェントで条件分岐やっちゃおうかー と進めていたJavaScriptの動作が検証できました。

ダウンロード if.useragent.js v0.9

uaNameでブラウザタイプが、ios_verでiOSのバージョンが取れます。CSS側で制御する場合の例ですと、htmlにクラス付与したりがよくあるパターン。

というふうにすると、例えばCSSで #content を iphoneだけCSS制御したい場合、

なんてことができるようになります。
結構便利。

対応ブラウザ

  • IE6 -> 10
  • iPhone iOS 2 or higher
  • iPad
  • iPod
  • Android
  • Chrome
  • Firefox
  • Safari
  • Opera

注意点

if.useragent.js 内の Safari を判定している部分、if (userAgent.indexOf(‘safari’) != -1) より先に firefox を判定するコードをもっていくと、同じuserAgent.indexOf(‘gecko’)でマッチしちゃうので、並び替えしたい場合はなんらかしらの手を打つ必要があります。なるべくはシェア順にしたいところですが、シンプルなコードが好きなのでそのままにしてあります。

あとiOSの分岐ですが、iPhoneの場合だけ取るようにしてます。iPadやらでやりたい場合は適宜コピペしてあげればいいんじゃないでしょうか。

if.useragent.js v0.9

コードの内容は下記のようになっております。

検証用HTML

検証用に使ってたHTML置いときます。
テスト用HTMLなんで右クリックでダウンロードもOK↓
http://company.miyanavi.net/sample/if-userAgent-testpage.html

中身は下記のようになってます。

(追記)
Android で Safari の場合、上手く判定できないようです、下のコメント欄をご覧ください。

2 件のコメント

  • ソースコードの
    37行目の
    「} else if (userAgent.indexOf(‘safari’) != -1) {」

    43行目の
    「} else if (userAgent.indexOf(‘android’) != -1) {」
    に関して少し疑問があり、コメントを残します。
    Androidの標準ブラウザだとUserAgentの語尾にsafariが書かれている場合が多く
    上記の順序だとAndroidの多くの標準ブラウザでsafariとして特定される可能性が
    高いと思われます。

    私のDocomoのLG OptimusGだと下記のように取得されます。
    「Mozilla/5.0 (Linux; U; Android 4.1.2; ja-jp; L-01E Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30」

  • IE10の仕分けについて、Edgeというのが基本設定になっていて、Firefoxの診断を受けたので改造してみました。
    IE10がEdge設定の場合、userAgentは
    mozilla/5.0 (windows nt 6.1; trident/7.0; slcc2; .net clr 2.0.50727; .net clr 3.5.30729; .net clr 3.0.30729; media center pc 6.0; .net4.0c; .net4.0e; bri/2; tablet pc 2.0; infopath.1; rv:11.0) like gecko
    でした。

    } else if (userAgent.indexOf(‘gecko’) != -1) {
    if(userAgent.indexOf(‘like’) != -1 ) {
    uaName = ‘ie10’;
    } else {
    uaName = ‘firefox’;
    }
    }
    firefoxの部分は入れ子で再判定をしてはどうでしょうか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です