備忘録
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>