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

How can I check for real touch support on a browser

本文关键字：触摸 支持 检查 浏览器      更新时间：2023-09-26

今天（或最近）Chrome Beta为我更新到17，我注意到我的网络应用程序中有一些奇怪之处。我注意到这是因为一个类被添加到了body元素中，通常只有在有触摸事件支持的情况下才会被放在那里，我这样检查：

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

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

否则，在没有用户代理嗅探的情况下，我怎么能检查它是一个真实的、可触摸的设备，而不仅仅是一个支持触摸事件的浏览器。

尝试：

'ontouchstart' in document.documentElement

并不是说你可能不想仅仅因为浏览器"支持触摸"就改变行为。Windows上的Chrome浏览器现在一直支持触摸，尽管不一定会附带触摸屏。即使连接了触摸屏，用户也不一定会使用它，所以你需要小心更改。

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

  1. 您想知道是否会收到touchstart/touchmove/touchend事件：真的没有办法事先确定这一点。用户可以在你的页面加载后插入触摸屏。如果你可能对这些事件感兴趣，你应该听听它们。

  2. 你想知道是否应该显示网站的"移动"版本用户是否有触摸支持并不是正确的信号——例如，一个有触摸屏的Windows用户可能不想要你的移动网站。你可以使用UserAgent-hurstics，但请给用户一个切换网站版本的粘性方法。

  3. 你想知道是否应该调整你的UI，使其对触摸输入更友好例如，如果用户可能使用触摸，也许有些按钮应该更大。一般来说，最好总是为多个指针类型进行设计——毕竟，当用户同时拥有触摸和鼠标时，你无法知道用户的指针偏好。但是，如果你真的想利用指针硬件的知识来提示你做出最佳的UI权衡，那么你可以使用新的CSS媒体查询：

    • http://dev.w3.org/csswg/mediaqueries4/#pointer
    • http://dev.w3.org/csswg/mediaqueries4/#hover

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

('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch
相关文章：