備忘録

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

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'; }

解説

コメントアウトで解説


// -------------------------------------------------------------------
// 変数
// -------------------------------------------------------------------
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ハックを使いたくない場合に使う。

例）macのchrome


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

例）win7のIE9


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