使用 Javascript 进行浏览器检测答案

【问题标题】：Browser Detection with Javascript使用 Javascript 进行浏览器检测
【发布时间】：2012-10-18 17:31:02
【问题描述】：

这个问题的原因

我知道浏览器检测永远不会 100% 可靠，因为用户代理标头总是可以伪造的，但是，我对此并不感到困扰。

虽然关于这个话题有很多问题，但它们似乎都很老了，所以为了获得最新的答案，我觉得我应该再问一次这个问题。

我目前正在使用 PHP browscap 检测浏览器名称和版本服务器端，然后将名称和版本返回到 javascript 变量中（不是一个很好的方法）。我需要这样做的原因只是为了在访问者未使用受支持的浏览器时向他们显示一条消息。

当前方法（类似的东西）：

<script type="text/javascript">
    var browser = new Array();
    browser['browser'] = '<?php echo $browser_name; ?>';
    browser['version'] = '<?php echo $browser_version; ?>';
    browser['error'] = '<?php echo $browser_error; ?>';
</script>

做这个客户端会好得多，因为browscap可能会很慢，而且它会阻止我将值从PHP传递给javascript变量。 如果您认为使用 PHP 是一种更好的方法，请在您的回答中说明，这只是我的意见。

问题

因此，我的问题很简单，以下链接是确定浏览器名称和版本的可靠方法吗？

Javascript Detect

我知道需要添加新的浏览器，这不会打扰我。我更关心使用的算法是否可靠。

提前致谢

更新 1

要了解我的意思，请查看 Internet Explorer 7 或更低版本中的 https://www.icloud.com/。您将收到一条消息，指出不支持该浏览器。这对于 IE 来说很容易做到，因为您可以简单地使用 <!--[if gt IE...，但是，我需要测试所有浏览器。

【问题讨论】：

看看媒体查询
那你为什么又嗅探浏览器了？
@Asad 因为某些东西在特定浏览器中不起作用，例如在 Internet Explorer 7 及以下版本中具有透明背景的图像，使用 jQuery 动画效果不佳。众多示例之一
你的脚本可以通过js直接查找浏览器中是否存在这个特性，并做出相应的响应。这称为特征检测，优于浏览器嗅探slew of reasons。看看 Modernizr。
@Asad 好的，例如。我如何检测具有透明背景的图像是否可以在不看起来很糟糕的情况下进行动画处理？您肯定只能测试不透明度功能吗？

标签： php javascript browser-detection

【解决方案1】：

这看起来不对，您可以从 Javascript 获取浏览器信息。无需混合 JS 和 PHP 代码即可。

您可以执行以下操作来获取并仅使用 JavaScript 检测用户浏览器：

var userAgent = navigator.userAgent.toLowerCase();
var old = false;

// Internet Explorer 7
if (userAgent.indexOf('msie 7.0b') !== -1) { old = true; }
else if (userAgent.indexOf('msie 7.0') !== -1) { old = true; }

// Internet Explorer 6
else if (userAgent.indexOf('msie 6.1') !== -1) { old = true; }
else if (userAgent.indexOf('msie 6.01') !== -1) { old = true; }
else if (userAgent.indexOf('msie 6.0b') !== -1) { old = true; }
else if (userAgent.indexOf('msie 6.0') !== -1) { old = true; }
...
// Detect any other browser versions you consider old

if(old = true) {
// Show notification and alert users that they are using old browser
}

这是使用 JS 的方法，但也可以使用 HTML 来实现：

<!--[if lte IE 6]>
   // include your .css style or do whatever you want to alert users their browser is old
<![endif]-->

对您的问题的简短回答是肯定的，以您的方式检测用户浏览器是错误的，因为您可以使用纯 JavaScript 甚至 HTML 进行检测。此处无需混用 PHP 和 JS 代码，最终 PHP 和 JS 都会得到相同的 UserAgent 信息。

【讨论】：

这是一个相当冗长的方法，因为您必须列出所有可能的浏览器，我的链接肯定比这更好吗？我使用的 PHP 脚本非常可靠，因为它每天从 Gary Keiths 网站更新：browsers.garykeith.com/downloads
我的 JS 示例不是检测浏览器的最佳方法，但如果您想编写自己的客户端浏览器检测器，它只是让您前进的东西。任何其他库或插件都会做同样的事情，将当前客户端与您不想要的客户端进行比较。检测浏览器的最佳方法是在客户端中使用 JS 进行检测。所以要走的路是找一些JS浏览器检测器，或者一些jQuery插件来检测浏览器。真的不需要把 PHP 和 JS 混在一起。或者您可以使用很多人使用的 HTML 示例，这是检测 IE6 之前的浏览器并通知他们的最简单方法。
这就是我发布此链接的原因！ quirksmode.org/js/detect.html我想知道它是否足够可靠

【解决方案2】：

说明

经过与其他开发人员的广泛研究和讨论，很明显没有可靠的方法可以从用户代理中检索浏览器名称和版本。这有几个原因：

如果浏览器的开发人员愿意，浏览器用户代理的格式可以随时更改。这可能会立即阻止某些脚本正常工作。
用户可以伪造他们的用户代理来模仿其他浏览器，因此看起来像是在使用他们不是的浏览器。

可能的解决方案

虽然我非常不鼓励使用这些脚本，因为它们可能会在任何浏览器的更新发布时停止工作，但如果您确实希望在 Javascript 中检测浏览器名称和版本，那么我建议使用此脚本：

Javascript Detect

然而，检索浏览器详细信息的最可靠方法无疑是 Gary Keith 提供的browscap。 browscap 项目提供有关从用户代理收集的每个浏览器和操作系统的大量信息。它很容易实现，甚至更容易使用。要了解更多信息，请查看：

Gary Keith - Browscap

如果您选择使用 Gary Keith 的 browscap，您需要确保至少每周更新一次。

回答

虽然我与这个答案相矛盾，但很明显，不建议使用任何类型的脚本检测浏览器信息。唯一可靠的浏览器检测方法是 Internet Explorer HTML 条件，如前所述，这些仅涵盖 Internet Explorer。

尽量避免浏览器特定的功能和注意事项，并利用内置功能，例如：

media="only screen and (device-width: 768px)"

和

<!--[if IE 8]>I am IE 8<![endif]-->

【讨论】：

【解决方案3】：

这个问题需要更新的答案。我认为目前客户端检测的最佳选择是WURFL。

它是一个基于用户代理的更新设备库 - 考虑一下客户端的 Browscap。

加载 JS 并根据请求 js 的设备返回 JSON。完美！

<script type="text/javascript" src="//wurfl.io/wurfl.js"></script>

因为它在 WURFL 服务器端进行解析，所以你需要远程加载 js，而不是保存在你的目录树中。

超级简单

WURFL.is_mobile

例如，确定移动设备所需要的一切。

祝你好运。

【讨论】：

【解决方案4】：

您可以尝试查看navigator.appName 和navigator.userAgent。

【讨论】：

【解决方案5】：

yepnopejs IE detection (!ie prefixes) 利用 MS 条件 cmets 工作。

一个简短的 sn-p 用于在 JavaScript 中检测 IE10 之前的 IE 版本，而不使用用户代理嗅探。

while (
  div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->'
);
// …

https://github.com/SlexAxton/yepnope.js/blob/master/prefixes/yepnope.ie-prefix.js

yepnope 用法示例：

yepnope({
    load: ['normal.js', 'ie6!ie7!ie-patch.js'] // patch for ie6 or ie7 only
});

【讨论】：

这并不包括其他浏览器。我知道这种方法

【解决方案6】：

你可以使用一个完美的插件来处理这个用 jQuery 编写的信息（比如 javascript）

看看这个链接：

https://github.com/jquery/plugins.jquery.com

当您想要确定某个功能在浏览器中是否可用、应用错误修复等时，请务必进行功能检测而不是浏览器检测。

【讨论】：