如何使用JavaScript确定确切的浏览器和版本?


当前回答

遗憾的是,IE11的导航器中不再有MSIE。

Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; BRI/2; BOIE9;ENUS; rv:11.0) like Gecko

至于为什么你想知道你在使用哪个浏览器,这是因为每个浏览器都有自己的一组错误,你最终实现了浏览器和版本特定的解决方案,或者告诉用户使用不同的浏览器!

其他回答

我做了这个小函数,希望对大家有帮助。在这里你可以找到最新的版本 browserDetection

function detectBrowser(userAgent){
  var chrome  = /.*(Chrome\/).*(Safari\/).*/g;
  var firefox = /.*(Firefox\/).*/g;
  var safari  = /.*(Version\/).*(Safari\/).*/g;
  var opera   = /.*(Chrome\/).*(Safari\/).*(OPR\/).*/g

  if(opera.exec(userAgent))
    return "Opera"
  if(chrome.exec(userAgent))
    return "Chrome"
  if(safari.exec(userAgent))
    return "Safari"
  if(firefox.exec(userAgent))
    return "Firefox"
}
var browser = navigator.appName;
var version = navigator.appVersion;

然而,请注意,两者并不一定反映事实。许多浏览器都可以设置为其他浏览器的掩码。例如,你不能总是确定用户是用IE6还是用伪装成IE6的Opera上网。

 var isOpera = !!window.opera || navigator.userAgent.indexOf('Opera') >= 0;
        // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
        var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
        var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
        // At least Safari 3+: "[object HTMLElementConstructor]"
        var isChrome = !!window.chrome;                          // Chrome 1+
        var isIE = /*@cc_on!@*/false; 

你可以阅读更多 如何检测Safari, Chrome, IE, Firefox和Opera浏览器?

通常最好尽可能避免使用特定于浏览器的代码。JQuery $。属性可用于检测对特定特性的支持,而不是依赖于浏览器名称和版本。

以Opera为例,你可以伪造internet explorer或firefox实例。

JQuery的详细描述。支持可以在这里找到:http://api.jquery.com/jQuery.support/

现在根据jQuery弃用。

我们强烈建议使用外部库,如Modernizr 而不是依赖于jQuery.support中的属性。

在编写网站代码时,我总是确保,像导航这样的基本功能对非js用户也是可以访问的。这可能是讨论的对象,如果主页是针对特殊受众,可以忽略。

下面是我如何为Internet Explorer做自定义CSS:

在我的JavaScript文件:

function isIE () {
      var myNav = navigator.userAgent.toLowerCase();
      return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

jQuery(document).ready(function(){
    if(var_isIE){
            if(var_isIE == 10){
                jQuery("html").addClass("ie10");
            }
            if(var_isIE == 8){
                jQuery("html").addClass("ie8");
                // you can also call here some function to disable things that 
                //are not supported in IE, or override browser default styles.
            }
        }
    });

然后在我的CSS文件中,定义每个不同的样式:

.ie10 .some-class span{
    .......
}
.ie8 .some-class span{
    .......
}