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

Question

今天(或最近)Chrome Beta已经为我更新到了17,我发现我的网络应用程序中有一些功能.我注意到这是因为正在将一个类添加到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

`(窗口中'ontouchstart')|| window.DocumentTouch && window.document instanceof DocumentTouch || window.navigator.maxTouchPoints || window.navigator.msMaxTouchPoints？true:false` (2认同)