JavaScriptでユーザーエージェントを取得しclassを付与する

# 備忘録
JavaScriptでユーザーエージェントを取得しclassを付与する記述。

JSライブラリ依存せずに使用。

## 記述

```js:ユーザーエージェントを取得しclassを付与

// 変数
var agent       = navigator.userAgent; // ユーザーエージェント
var htmlElement = document.documentElement; // html要素

// UserAgentで振り分けてhtmlにclassを振る
if (navigator.platform.search("Mac") != -1) { htmlElement.className += ' mac'; }
if(agent.search("Windows") != -1){
	htmlElement.className += ' win';
	if((agent.search("Trident") != -1) || ((agent.search("MSIE") != -1))) {
		htmlElement.className += ' ie';
		if(agent.search("Trident") != -1) { htmlElement.className += ' gte_ie8'; }
		if(agent.search("Trident") == -1) { htmlElement.className += ' lte_ie8'; }
		if(agent.search("MSIE 7") != -1){ htmlElement.className += ' ie7'; }
		if(agent.search("MSIE 8") != -1){ htmlElement.className += ' ie8'; }
		if(agent.search("MSIE 9") != -1){ htmlElement.className += ' ie9'; }
		if(agent.search("MSIE 10") != -1){ htmlElement.className += ' ie10'; }
		if(agent.search("Trident/7") != -1){ htmlElement.className += ' ie11'; }
	}
}
if((agent.search("Chrome") != -1) && (agent.search("OPR") == -1)){ htmlElement.className += ' chrome'; }
if((agent.search("Safari") != -1) && (agent.search("Chrome") == -1) && (agent.search("OPR") == -1) && (agent.search("Presto") == -1)) { htmlElement.className += ' safari'; }
if(agent.search("Firefox") != -1) { htmlElement.className += ' firefox'; }
if(agent.search("iPad") != -1){ htmlElement.className += ' ipad'; }
if(agent.search("iPhone") != -1){ htmlElement.className += ' iphone'; }
if(agent.search("Android") != -1){ htmlElement.className += ' android'; }

```

## 解説


```js:コメントアウトで解説

// -------------------------------------------------------------------
// 変数
// -------------------------------------------------------------------
var agent       = navigator.userAgent; // ユーザーエージェント
var htmlElement = document.documentElement; // html要素

// UserAgentで振り分けてhtmlにclassを振る
// -------------------------------------------------------------------
// Mac のとき
if (navigator.platform.search("Mac") != -1) {
	htmlElement.className += ' mac';
}

// Windows のとき
if(agent.search("Windows") != -1){
	htmlElement.className += ' win';

	if((agent.search("Trident") != -1) || ((agent.search("MSIE") != -1))) { // Internet Explorer All
		htmlElement.className += ' ie';

		if(agent.search("Trident") != -1) { // IE8以上
			htmlElement.className += ' gte_ie8';
		}
		if(agent.search("Trident") == -1) { // IE7以下
			htmlElement.className += ' lte_ie8';
		}
		if(agent.search("MSIE 7") != -1){ // 一応IE7
			htmlElement.className += ' ie7';
		}
		if(agent.search("MSIE 8") != -1){ // IE8
			htmlElement.className += ' ie8';
		}
		if(agent.search("MSIE 9") != -1){ // IE9
			htmlElement.className += ' ie9';
		}
		if(agent.search("MSIE 10") != -1){ // IE10
			htmlElement.className += ' ie10';
		}
		if(agent.search("Trident/7") != -1){ // IE11
			htmlElement.className += ' ie11';
		}
	}
}

// Chrome のとき
if((agent.search("Chrome") != -1) && (agent.search("OPR") == -1)){
	htmlElement.className += ' chrome';
}
// Safari のとき
if((agent.search("Safari") != -1) && (agent.search("Chrome") == -1) && (agent.search("OPR") == -1) && (agent.search("Presto") == -1)) {
	htmlElement.className += ' safari';
}
// Firefox のとき
if(agent.search("Firefox") != -1) {
	htmlElement.className += ' firefox';
}

// iPad のとき
if(agent.search("iPad") != -1){ htmlElement.className += ' ipad'; }

// iPhone のとき
if(agent.search("iPhone") != -1){ htmlElement.className += ' iphone'; }

// Android のとき
if(agent.search("Android") != -1){ htmlElement.className += ' android'; }

```

## 使い方

上記をhtml内や外部JSなど任意の箇所に記述する。

自動でユーザーエージェントから指定のクラスを付与。

cssハックを使いたくない場合に使う。


```html:例）macのchrome

<html lang="ja" class=" mac chrome">
<head>
略
</body>
<html>

```

```html:例）win7のIE9

<html lang="ja" class=" win ie gte_ie8 ie9">
<head>
略
</body>
<html>

```