369
341

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

使用してるブラウザを判定したい

Last updated at Posted at 2017-03-01

ブラウザを取得する


var userAgent = window.navigator.userAgent;

// 例えばChromeを使ってると
// userAgent: Mozilla/5.0 (windows nt 6.3; wow64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

window.navigatorでnavigatorオブジェクトが取れます。
このnavigatorオブジェクトはクッキーが有効かどうかや言語などブラウザに関する情報をいろいろ持っています。

リファレンスはこちら
Navigator Web API インターフェース | MDN

navigator.userAgentでブラウザのユーザーエージェントの文字列が返ってくるのですが、やけに長ったらしいので、ここに「Chrome」などの特定の文字列が含まれているかどうかで、どのブラウザを使用しているかを判定します。

ブラウザの識別子

基本的には以下の文字列で各ブラウザを識別できます。

ブラウザ 識別子
Internet Explorer MSIE または Trident
Edge Edge
Google Chrome Chrome
FireFox Firefox
Safari Safari
Opera Opera

基本的と言ったのは、これらの値はバージョンアップなどで予期せず変更される可能性があるからです。
IEを見てもらえばわかる通り、識別子が2種類あります。
これは、IE11になって、ユーザーエージェントの文字列から「MSIE」が削除され「Trident」が追加されたためです。

ブラウザの判定

判定をするにあたって、文字列をすべて小文字にしておきます。

var userAgent = window.navigator.userAgent.toLowerCase();

indexOfを使って判定します。

if(userAgent.indexOf('msie') != -1) {
  console.log('お使いのブラウザはInternet Explorerですね!');
}

"基本的には"これでOKです。
注意すべきはその順番です。

最初にChromeを使っていた場合の例を出しましたが、そのユーザーエージェントの文字列をもう一度よく見てみてください。

Mozilla/5.0 (windows nt 6.3; wow64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

「Safari」って入ってますね。先ほど一覧化したように「Safari」はもちろんSafariブラウザの識別子になります。しかしここでの期待値はChromeです。判定の順序を適当に書いてしまうと、本当はChromeを使っているのにSafariを使用していると誤判定する恐れがあります。

Edgeに至ってはChromeもSafariも含んでいます。はぁ?という感じです。

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10162

#正しい判定順

SafariよりChromeが先、
ChromeよりEdgeが先です。

var userAgent = window.navigator.userAgent.toLowerCase();

if(userAgent.indexOf('msie') != -1 ||
        userAgent.indexOf('trident') != -1) {
    console.log('Internet Explorerをお使いですね');
} else if(userAgent.indexOf('edge') != -1) {
    console.log('Edgeをお使いですね');
} else if(userAgent.indexOf('chrome') != -1) {
    console.log('Google Chromeをお使いですね');
} else if(userAgent.indexOf('safari') != -1) {
    console.log('Safariをお使いですね');
} else if(userAgent.indexOf('firefox') != -1) {
    console.log('FireFoxをお使いですね');
} else if(userAgent.indexOf('opera') != -1) {
    console.log('Operaをお使いですね');
} else {
    console.log('そんなブラウザは知らん');
}

IEのバージョンは

バージョンもnavigatorオブジェクトから取得できます。

var version = window.navigator.appVersion.toLowerCase();

6~10まではこう。

if (version.indexOf("msie 6.") != -1) {
    console.log('IE6なんですねプークスクス');
}

11は先述した通り識別子がTridentなのでそこで判別します。
6より前は考慮しないことにします。

おまけ

モバイルはこうすれば良いらしい

var userAgent = window.navigator.userAgent.toLowerCase();

if(userAgent.indexOf('iphone') != -1) {
    console.log('iPhoneをお使いですね');
} else if(userAgent.indexOf('ipad') != -1) {
    console.log('iPadをお使いですね');
} else if(userAgent.indexOf('android') != -1) {
    if(userAgent.indexOf('mobile') != -1) {
        console.log('androidのスマホをお使いですね');
    } else {
        console.log('androidのタブレットをお使いですね');
    }
} 

▼参考
JavaScriptでUserAgentを使った判別をする

369
341
7

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
369
341

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?