JavaScript 浏览器检测？

Question

我需要在当前项目中添加对触摸设备的某种支持。因为这是我第一次必须做这样的事情，所以我看了一下一些“制作精良”的网站的代码，看看他们是如何做到的。

一个页面做这样的事情：

if(document.querySelectorAll && (navigator.platform == "iPad" || navigator.platform.substring(0, 6) == "iPhone" || navigator.platform == "iPod" || navigator.userAgent.indexOf('Android') > -1)) {...}

我在我手头的所有设备上都对其进行了测试，并且可以正常工作，但是请告诉我，这样做可以吗？有没有“正确”的方法？

我问是因为here 我已经读过应该避免浏览器检测，而是应该使用对象检测。现在我看到他们也在测试document.querySelectorAll，这是对象检测，所以也许它之后的一切都只是某种安全网？

Answer 1

应该避免浏览器检测，是的。因为浏览器可以改变。

今天，也许 google Chrome 不支持某个功能。但是明天 Chrome 应该会更新并支持它。

所以如果你做类似if (!isGoogleChrome())，Chrome 更新的那一天，你必须更新你的代码。

您应该进行对象检测。 例如，如果你想确保一个函数/对象在这里，只需测试它：

if (document.querySelectorAll !== undefined) {
    //...
}

您也可以使用http://modernizr.com/，它可以为您检测当前浏览器的功能。

Answer 2

您使用的代码非常非常明智：在开头插入任何简单的字符都会使其失败。

你可以用类似的东西替换它

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Mini/i.test(navigator.userAgent)) { ...

但您应该知道，检测设备是危险的，因为它们可能比人们想象的更加多样化：有些具有比某些桌面浏览器更好的 CPU、网络访问或屏幕。因此，对于大多数用途，最好检测您需要的功能。

在我看来，如果您计划根据可用设备维护您的网站，但还有其他解决方案，例如 Modernizr 或 specific tests 等库，此检测可以合法地用于检测触摸屏。