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

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

今天，谷歌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等库。

JavaScript浏览器检测？

2 个答案: