如何检测chrome和safari浏览器(webkit)

Question

我试图使用jquery或javascript检测chrome和safari浏览器.我以为我们不应该使用jQuery.browser.这里有什么建议吗？非常感谢!

Answer 1

如果您不想使用$.browser,请查看案例1,否则案例2和3可以帮助您获得通知,因为不建议使用$.browser(用户代理可以使用此欺骗).可以使用替代方案来jQuery.support检测功能支持而不是代理信息.

但...

如果您坚持使用浏览器类型(仅限Chrome或Safari)但不使用$.browser,则案例1就是您要寻找的...

这符合您的要求:

案例1 :( 没有jQuery,没有$ .browser,只是javascript)

现场演示: http ://jsfiddle.net/oscarj24/DJ349/

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);

if (isChrome) alert("You are using Chrome!");
if (isSafari) alert("You are using Safari!");

我之前使用过的这些案例并且运作良好但不推荐......

案例2 :( 使用jQuery和$ .browser,这个很棘手)

现场演示: http ://jsfiddle.net/oscarj24/gNENk/

$(document).ready(function(){

    /* Get browser */
    $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());

    /* Detect Chrome */
    if($.browser.chrome){
        /* Do something for Chrome at this point */
        /* Finally, if it is Chrome then jQuery thinks it's 
           Safari so we have to tell it isn't */
        $.browser.safari = false;
    }

    /* Detect Safari */
    if($.browser.safari){
        /* Do something for Safari */
    }

});

案例3 :( 使用jQuery和$ .browser,"优雅"解决方案)

现场演示: http ://jsfiddle.net/oscarj24/uJuEU/

$.browser.chrome = $.browser.webkit && !!window.chrome;
$.browser.safari = $.browser.webkit && !window.chrome;

if ($.browser.chrome) alert("You are using Chrome!");
if ($.browser.safari) alert("You are using Safari!");

Answer 2

这里的大多数答案已经过时,没有更多jQuery.browser,为什么有人甚至会使用jQuery或者会嗤之以鼻User Agent.

您应该更好地检测某个功能(无论是否支持),而不是检测浏览器.
以下是falseMozilla Firefox,Microsoft Edge; 它true在Google Chrome中.

"webkitLineBreak" in document.documentElement.style

请注意,这不是面向未来的.浏览器可以-webkit-line-break在将来的任何时间实现该属性,从而导致错误检测.然后,您只需查看Chrome中的文档对象,并选择带有webkit前缀的任何内容,并检查其他浏览器中是否缺少该文档.

Answer 3

您应该更好地检测某个功能(无论是否支持),而不是检测浏览器.这就是Modernizr所做的.

当然,在某些情况下您仍需要检查浏览器,因为您需要解决问题而不是检测功能.WebKit不使用jQuery的特定检查$.browser:

var isWebKit = !!window.webkitURL;

由于一些评论表明上述方法不适用于较旧的Safari版本.使用评论和其他答案建议的其他方法进行更新:

var isWebKit = 'WebkitAppearance' in document.documentElement.style;

Answer 4

2019年仍然存在怪癖和不一致之处。

例如，在浏览器之间缩放 svg 和指针事件。

该主题的所有答案都不再有效。（也许那些有jquery 的）

这是一种替代方法，通过原生CSS 支持 api使用 javascript 测试是否支持 css 规则。可能会进化，要适应！

请注意，可以传递许多由分号分隔的 css 规则，以实现最佳检测。

if (CSS.supports("( -webkit-box-reflect:unset )")){
  console.log("WEBKIT BROWSER")
  // More math...
 } else {
  console.log("ENJOY")
 }

if (CSS.supports("( -moz-user-select:unset )")){
  console.log("FIREFOX!!!")
 }

注意不要在循环中使用它，为了提高性能，最好在加载时填充一个常量：

const ff = CSS.supports("( -moz-user-select:unset )")
if (ff){ //... } 

仅使用CSS，以上将是：

const ff = CSS.supports("( -moz-user-select:unset )")
if (ff){ //... } 

@supports (-webkit-box-reflect:unset) {
  div {
    background: red
  }
}

@supports (-moz-user-select:unset) {
  div {
    background: green
  }
}

可能的 -webkit-only css 规则列表。

可能的 -moz-only 规则列表。

我可以使用 css 支持吗？