Question

今天（或最近）Chrome Beta已经为我更新到了17，并且在我的网络应用中发现了一些funkiness。我注意到这是因为正在将一个类添加到body元素中，如果有触摸事件支持，通常只会放在那里，我会像这样检查：

  try {  
    document.createEvent("TouchEvent");
    _device.touch = true;
  } catch (e) {
    _device.touch = false;
  }

果然，我可以在Chrome 17上创建和触发触摸事件。我的第一个想法是，哦，我可以检查触摸，看看鼠标是否失败，因此，有鼠标，但是MouseEvents也会触发。

如果没有用户代理嗅探，我还能检查它是否是一个真实的，可触摸的设备，而不仅仅是支持触摸事件的浏览器。

Answer 1

尝试：

'ontouchstart' in document.documentElement

Answer 2

并非您可能不希望仅仅因为浏览器“支持触摸”而改变行为。例如。 Windows上的Chrome现在始终支持触摸，即使没有连接触摸屏也是如此。即使附有触摸屏，用户也不一定使用它，因此您需要小心改变的内容。

所以这真的归结为你想知道的原因：

你想知道你是否会得到touchstart / touchmove / touchend事件：事先没有办法提前知道这件事。例如。用户可以在页面加载后插入触摸屏。如果你对这些事件感兴趣，你应该只听它们。
您想知道是否应该展示您网站的“移动”版本用户是否具有触摸支持不是正确的信号 - 例如。具有触摸屏的Windows用户可能不想要您的移动网站。您可以使用UserAgent heurstics，但请为用户提供一种切换方式来切换您网站的版本。
您想知道是否应该调整UI以使触摸输入更友好例如，如果用户可能使用触摸，则某些按钮应该更大。一般来说，最好总是设计多种指针类型 - 毕竟，当它们同时具有触摸和鼠标时，你无法知道用户的指针偏好。但是，如果你真的想使用指针硬件的知识作为提示做出最佳UI权衡的提示，那么你可以使用新的CSS媒体查询：
- http://dev.w3.org/csswg/mediaqueries4/#pointer
- http://dev.w3.org/csswg/mediaqueries4/#hover

我在Chrome 21中为Chrome添加了部分支持（crbug.com/123062）。据我所知，还没有其他浏览器支持它们。

Answer 3

('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch

Answer 4

很容易，不要。如果你正确地设计网站，测试它的唯一有效理由是非触摸式浏览器，特别是旧浏览器，不会出现错误，并且取决于你如何实现触摸事件，甚至可能不是问题（他们只是不会开火），但是当使用像hammer.js这样的库时，你需要创建一个锤子对象的实例，在像IE 8这样的老式浏览器中会抛出一个错误，这很简单是将该代码包装在try和catch语句中：

try {
 var Hammer = new HAMMER();
} catch (err) {
 'do what ever or do nothing, does not support touch or won't work at least anyway'
}

此处将允许所有其他JavaScript代码继续。

如何在浏览器上检查真正的触控支持

4 个答案: