JavaScript 浏览器信息检测实现方案

浏览器信息检测逻辑概述

本文旨在介绍如何检测浏览器版本、核心引擎、操作系统以及判断当前设备是否为移动端。

/**
* 检查浏览器版本信息
* 作者：K
* 日期：2014-04-11 14:48:39
* 版本：1
 */
/**
 * 利用 navigator.userAgent 检测浏览器信息
 * @return {object} 浏览器信息对象
 */
var browser = (function(){
 var userAgent = navigator.userAgent,
 ua = userAgent.toLowerCase(),
 browserList = {
 msie : /(?:msie\s|trident.*rv:)([\w.]+)/i,
 firefox : /Firefox\/([\w.]+)/i,
 chrome : /Chrome\/([\w.]+)/i,
 safari : /version\/([\w.]+).*Safari/i,
 opera : /(?:OPR\/|Opera.+version\/)([\w.]+)/i
 },
 kernels = {
 MSIE: /(compatible;\smsie\s|Trident\/)[\w.]+/i,
 Camino: /Camino/i,
 KHTML: /KHTML/i,
 Presto: /Presto\/[\w.]+/i,
 Gecko : /Gecko\/[\w.]+/i,
 WebKit: /AppleWebKit\/[\w.]+/i
 },
 browser = {
 kernel : 'unknow',
 version : 'unknow'
 }
// 检测浏览器类型
 for(var i in browserList){
 var matchs = ua.match(browserList[i]);
 browser[i] = matchs ? true : false;
 if(matchs){
 browser.version = matchs[1];
 }
 }
// 检测渲染引擎
 for(var i in kernels){
 var matchs = ua.match(kernels[i]);
 if(matchs){
 browser.kernel = matchs[0];
 }
 }
// 检测操作系统
 var os = ua.match(/(Windows\sNT\s|Mac\sOS\sX\s|Android\s|ipad.*\sos\s|iphone\sos\s)([\d._-]+)/i);
 browser.os = os!==null ? os[0] : false;
// 判断是否移动端
 browser.mobile = ua.match(/Mobile/i)!==null ? true : false;
return browser;
}());