# **写在前面**

之前很早就看到这个，但是弄完之后，样式很不好看，于是就取消掉了，今天看到一个看起来不错的，使用图片显示那些图标的，但是在手机上图标都模糊了，于是就用了`font-awesome`图标。

测试页面：[点这里 》 》 》](https://www.ihewro.com/uatest.html)

> 把鼠标放在图标会有具体ua信息！

**只需要两步，简单搞定！**

# 第一步：本地化embed.js，并修改

* [多说官方js  》》点击打开](https://static.duoshuo.com/embed.js) 右键保存到本地，并格式化代码

* 引入font-awesome 图标所需要的css地址，把这段代码加入到header.php 的`</head>`标签的前面

```html
<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">
```

* 在本地的多说js文件中的**最上面**加入这段js代码

```javascript
//移动客户端判断开始，作用：在移动客户端显示不同样式
function sskcheckMobile(){ 
 var isiPad = navigator.userAgent.match(/iPad/i) != null; 
 if(isiPad){ 
 return false; 
 } 
 var isMobile=navigator.userAgent.match(/iphone|android|phone|mobile|wap|netfront|x11|java|opera mobi|opera mini|ucweb|windows ce|symbian|symbianos|series|webos|sony|blackberry|dopod|nokia|samsung|palmsource|xda|pieplus|meizu|midp|cldc|motorola|foma|docomo|up.browser|up.link|blazer|helio|hosin|huawei|novarra|coolpad|webos|techfaith|palmsource|alcatel|amoi|ktouch|nexian|ericsson|philips|sagem|wellcom|bunjalloo|maui|smartphone|iemobile|spice|bird|zte-|longcos|pantech|gionee|portalmmm|jig browser|hiptop|benq|haier|^lct|320x320|240x320|176x220/i)!= null; 
 if(isMobile){ 
 return true; 
 } 
 return false; 
} 
//移动客户端判断结束
//显UA开始
function sskua(e) {
		var r = new Array;
		var outputer = '';
		if (r = e.match(/FireFox\/([^\s]+)/ig)) {
			var r1 = r[0].split("/");
			outputer = 'Firefox' 
		} 
		
		else if (r = e.match(/Maxthon([\d]*)\/([^\s]+)/ig)) {
			var r1 = r[0].split("/");
			outputer = 'Maxthon'
		} 
		
		else if (r = e.match(/BIDUBrowser([\d]*)\/([^\s]+)/ig)) {
			var r1 = r[0].split("/");
			outputer = 'BaiDu Browser' 
		} 
		
		else if (r = e.match(/UBrowser([\d]*)\/([^\s]+)/ig)) {
			var r1 = r[0].split("/");
			outputer = 'UC Browser'
		} 
		
		else if (r = e.match(/UCBrowser([\d]*)\/([^\s]+)/ig)) {
			var r1 = r[0].split("/");
			outputer = 'UC Browser '
		} 
		
		else if (r = e.match(/MetaSr/ig)) {
			outputer = 'Sougou'
		} 
		
		
		else if (r = e.match(/LBBROWSER/ig)) {
			outputer = 'Liebao'
		} 
		
		else if (r = e.match(/MicroMessenger\/([^\s]+)/ig)) {
			var r1 = r[0].split("/");
			outputer = 'Wechat' 
		} 
		
		else if (r = e.match(/QQBrowser\/([^\s]+)/ig)) {
			var r1 = r[0].split("/");
			outputer = 'QQ Browser'
		} 
		
		else if (r = e.match(/QQ\/([^\s]+)/ig)) {
			var r1 = r[0].split("/");
			outputer = 'qq' 
		} 
		
		else if (r = e.match(/MiuiBrowser\/([^\s]+)/ig)) {
			var r1 = r[0].split("/");
			outputer = 'Miui' 
		} 
		
		else if (r = e.match(/Edge([\d]*)\/([^\s]+)/ig)) {
			var r1 = r[0].split("/");
			outputer = 'Edge'
		} 
		
		else if (r = e.match(/Chrome([\d]*)\/([^\s]+)/ig)) {
			var r1 = r[0].split("/");
			outputer = 'Chrome'
		} 
		
		else if (r = e.match(/safari\/([^\s]+)/ig)) {
			var r1 = r[0].split("/");
			outputer = 'Safari' 
		} 
		
		else if (r = e.match(/Opera[\s|\/]([^\s]+)/ig)) {
			var r1 = r[0].split("/");
			outputer = 'Opera'
		} 
		
		else if (r = e.match(/Trident\/7.0/gi)) {
			outputer = 'IE11'
		} 
		
		else if (r = e.match(/MSIE\s([^\s|;]+)/gi)) {
			outputer = 'IE' 
		} 
		
		else {
			outputer = 'Ua_others'
		}
		
		if(sskcheckMobile()){
			Mobile=' ';
		}else{
			Mobile='';
		}
		return outputer+""+Mobile ;
	}
	function sskos(e) {
		var os = '';
		if (e.match(/win/ig)) {
			if (e.match(/nt 5.1/ig)) {
				os = 'Win xp'
			} else if (e.match(/nt 6.1/ig)) {
				os = 'Win 7'
			} else if (e.match(/nt 6.2/ig)) {
				os = 'Win 8'
			} else if (e.match(/nt 6.3/ig)) {
				os = 'Win 8.1'
			} else if (e.match(/nt 10.0/ig)) {
				os = 'Win 10'
			} else if (e.match(/nt 6.0/ig)) {
				os = 'Win vista'
			} else if (e.match(/nt 5/ig)) {
				os = 'Win 2000'
			} else {
				os = 'Win'
			}
		} else if (e.match(/android/ig)) {
			os = 'Android'
		} else if (e.match(/ubuntu/ig)) {
			os = 'Ubuntu'
		} else if (e.match(/linux/ig)) {
			os = 'Linux'
		} else if (e.match(/mac/ig)) {
			os = 'Mac'
		} else if (e.match(/unix/ig)) {
			os = 'Unix'
		} else if (e.match(/symbian/ig)) {
			os = 'Nokia'
		} else {
			os = 'Os_others'
		}
		return os+"" ;
	}
//显UA结束

```
* 搜索
```javascript
data-qqt-account="' + (r.qqt_account || "") + '">' + u(r.name) + ""),
```
在后面添加下面这段：
```javascript
t += "" + sskua(s.agent) + "" + sskos(s.agent) + "",
```

目的就是在用户名后面多输出这个信息。

# 第二步：加点CSS，优化一下效果
```css
.fa-edge,.fa-chrome,.fa-globe,.fa-firefox,.fa-weixin,.fa-safari,.fa-opera,.fa-internet-explorer,.fa-windows,.fa-android,.fa-desktop,.fa-linux,.fa-apple,.fa-mobile:before{
	margin-right:4px;
  width: 14px!important;
    height: 14px!important;
	color:rgba(96,95,95,1.00);
}

span.ua{
	margin-right:5px!important;
	color:rgba(96,95,95,1.00);
}
```

我把图标和文字颜色调成了灰色，还有修改了一外边距和大小。

**大功告成！**

# 参考文章
[多说回复后显示浏览器及操作系统信息（Useragent）
](http://ssk.91txh.com/209)

写在前面

之前很早就看到这个，但是弄完之后，样式很不好看，于是就取消掉了，今天看到一个看起来不错的，使用图片显示那些图标的，但是在手机上图标都模糊了，于是就用了font-awesome图标。

测试页面：点这里》》》

把鼠标放在图标会有具体ua信息！

只需要两步，简单搞定！

第一步：本地化embed.js，并修改

多说官方js 》》点击打开右键保存到本地，并格式化代码
引入font-awesome 图标所需要的css地址，把这段代码加入到header.php 的</head>标签的前面

<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">

在本地的多说js文件中的最上面加入这段js代码

//移动客户端判断开始，作用：在移动客户端显示不同样式
function sskcheckMobile(){  
    var isiPad = navigator.userAgent.match(/iPad/i) != null;  
    if(isiPad){  
        return false;  
    }  
    var isMobile=navigator.userAgent.match(/iphone|android|phone|mobile|wap|netfront|x11|java|opera mobi|opera mini|ucweb|windows ce|symbian|symbianos|series|webos|sony|blackberry|dopod|nokia|samsung|palmsource|xda|pieplus|meizu|midp|cldc|motorola|foma|docomo|up.browser|up.link|blazer|helio|hosin|huawei|novarra|coolpad|webos|techfaith|palmsource|alcatel|amoi|ktouch|nexian|ericsson|philips|sagem|wellcom|bunjalloo|maui|smartphone|iemobile|spice|bird|zte-|longcos|pantech|gionee|portalmmm|jig browser|hiptop|benq|haier|^lct|320x320|240x320|176x220/i)!= null;  
    if(isMobile){  
        return true;  
    }  
    return false;  
}  
//移动客户端判断结束
//显UA开始
function sskua(e) {
        var r = new Array;
        var outputer = '';
        if (r = e.match(/FireFox\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span title="Firefox ' + r1[1] + '" class="ua_firefox"><i class="fa fa-firefox"></i>Firefox' 
        } 
        
        else if (r = e.match(/Maxthon([\d]*)\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span title="Maxthon " class="ua_maxthon"><i class="fa fa-globe"></i>Maxthon'
        } 
        
        else if (r = e.match(/BIDUBrowser([\d]*)\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span title="百度浏览器 ' + r1[1] + '" class="ua_ucweb"><i class="fa fa-globe"></i>BaiDu Browser' 
        } 
        
        else if (r = e.match(/UBrowser([\d]*)\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span title="UC浏览器 ' + r1[1] + '" class="ua_ucweb"><i class="fa fa-globe"></i>UC Browser'
        } 
        
        else if (r = e.match(/UCBrowser([\d]*)\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span title="UC浏览器 ' + r1[1] + '" class="ua_ucweb"><i class="fa fa-globe"></i>UC Browser '
        } 
        
        else if (r = e.match(/MetaSr/ig)) {
            outputer = '<span title="搜狗浏览器 " class="ua_sogou"><i class="fa fa-globe"></i>Sougou'
        } 
        
        
        else if (r = e.match(/LBBROWSER/ig)) {
            outputer = '<span title="猎豹浏览器 " class="ua_lbbrowser"><i class="fa fa-globe"></i>Liebao'
        } 
        
        else if (r = e.match(/MicroMessenger\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span title="微信 ' + r1[1] + '" class="ua_qq"><i class="fa fa-weixin"></i>Wechat' 
        } 
        
        else if (r = e.match(/QQBrowser\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span title="QQ浏览器 ' + r1[1] + '" class="ua_qq"><i class="fa fa-globe"></i>QQ Browser'
        } 
        
        else if (r = e.match(/QQ\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span title="QQ浏览器 ' + r1[1] + '" class="ua_qq"><i class="fa fa-globe"></i>qq' 
        } 
        
        else if (r = e.match(/MiuiBrowser\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span title="Miui浏览器 ' + r1[1] + '" class="ua_mi"><i class="fa fa-globe"></i>Miui' 
        } 
        
        else if (r = e.match(/Edge([\d]*)\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span title="Edge ' + r1[1] + '" class="ua_ie"><i class="fa fa-edge"></i>Edge'
        } 
        
        else if (r = e.match(/Chrome([\d]*)\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span title="Chrome ' + r1[1] + '" class="ua_chrome"><i class="fa fa-chrome"></i>Chrome'
        } 
        
        else if (r = e.match(/safari\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span title="Safari ' + r1[1] + '" class="ua_apple"><i class="fa fa-safari"></i>Safari' 
        } 
        
        else if (r = e.match(/Opera[\s|\/]([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span title="Opera ' + r[1] + '" class="ua_opera"><i class="fa fa-opera"></i>Opera'
        } 
        
        else if (r = e.match(/Trident\/7.0/gi)) {
            outputer = '<span title="IE11 " class="ua_ie"><i class="fa fa-internet-explorer"></i>IE11'
        } 
        
        else if (r = e.match(/MSIE\s([^\s|;]+)/gi)) {
            outputer = '<span title="IE ' + r[0] + '" class="ua_ie"><i class="fa fa-internet-explorer"></i>IE' 
        } 
        
        else {
            outputer = '<span title="其他浏览器" class="ua_other"><i class="fa fa-globe"></i>Ua_others'
        }
        
        if(sskcheckMobile()){
            Mobile='<br><br>';
        }else{
            Mobile='';
        }
        return outputer+"</span>"+Mobile ;
    }
    function sskos(e) {
        var os = '';
        if (e.match(/win/ig)) {
            if (e.match(/nt 5.1/ig)) {
                os = '<span title="windows XP" class="os_xp"><i class="fa fa-windows"></i>Win xp'
            } else if (e.match(/nt 6.1/ig)) {
                os = '<span title="windows 7" class="os_7"><i class="fa fa-windows"></i>Win 7'
            } else if (e.match(/nt 6.2/ig)) {
                os = '<span title="windows 8" class="os_8"><i class="fa fa-windows"></i>Win 8'
            } else if (e.match(/nt 6.3/ig)) {
                os = '<span title="windows 8.1" class="os_8_1"><i class="fa fa-windows"></i>Win 8.1'
            } else if (e.match(/nt 10.0/ig)) {
                os = '<span title="windows 10" class="os_8_1"><i class="fa fa-windows"></i>Win 10'
            } else if (e.match(/nt 6.0/ig)) {
                os = '<span title="windows Vista" class="os_vista"><i class="fa fa-windows"></i>Win vista'
            } else if (e.match(/nt 5/ig)) {
                os = '<span title="windows 2000" class="os_2000"><i class="fa fa-windows"></i>Win 2000'
            } else {
                os = '<span title="windows 未知" class="os_windows"><i class="fa fa-windows"></i>Win'
            }
        } else if (e.match(/android/ig)) {
            os = '<span title="Android" class="os_android"><i class="fa fa-android"></i>Android'
        } else if (e.match(/ubuntu/ig)) {
            os = '<span title="Ubuntu" class="os_ubuntu"><i class="fa fa-desktop"></i>Ubuntu'
        } else if (e.match(/linux/ig)) {
            os = '<span title="Linux" class="os_linux"><i class="fa fa-linux"></i>Linux'
        } else if (e.match(/mac/ig)) {
            os = '<span title="Mac OS X" class="os_mac"><i class="fa fa-apple"></i>Mac'
        } else if (e.match(/unix/ig)) {
            os = '<span title="Unix" class="os_unix"><i class="fa fa-desktop"></i>Unix'
        } else if (e.match(/symbian/ig)) {
            os = '<span title="Nokia SymbianOS" class="os_nokia"><i class="fa fa-mobile"></i>Nokia'
        } else {
            os = '<span title="其它操作系统" class="os_other"><i class="fa fa-desktop"></i>Os_others'
        }
        return os+"</span>" ;
    }
//显UA结束

搜索

data-qqt-account="' + (r.qqt_account || "") + '">' + u(r.name) + "</span>"),

在后面添加下面这段：

t += "<span class=\"ua\">" + sskua(s.agent) + "</span><span class=\"ua\">" + sskos(s.agent) + "</span>",

目的就是在用户名后面多输出这个信息。

第二步：加点CSS，优化一下效果

.fa-edge,.fa-chrome,.fa-globe,.fa-firefox,.fa-weixin,.fa-safari,.fa-opera,.fa-internet-explorer,.fa-windows,.fa-android,.fa-desktop,.fa-linux,.fa-apple,.fa-mobile:before{
    margin-right:4px;
  width: 14px!important;
    height: 14px!important;
    color:rgba(96,95,95,1.00);
}

span.ua{
    margin-right:5px!important;
    color:rgba(96,95,95,1.00);
}

我把图标和文字颜色调成了灰色，还有修改了一外边距和大小。

大功告成！