使用JavaScript检测“触摸屏”设备的最佳方法是什么?

我编写了一个jQuery插件，可以在桌面和移动设备上使用。我想知道是否有一种方法可以用JavaScript来检测设备是否具有触摸屏功能。我使用jquery-mobile.js来检测触摸屏事件，它适用于iOS, Android等，但我也想根据用户的设备是否有触摸屏来编写条件语句。

这可能吗?

当前回答

$.support.touch ? "true" : "false";

其他回答

许多这些工作，但要么需要jQuery，或javascript linters抱怨语法。考虑到你最初的问题要求“JavaScript”(不是jQuery，不是Modernizr)来解决这个问题，这里有一个简单的函数，每次都能工作。这也是你能得到的最小值。

function isTouchDevice() {
    return !!window.ontouchstart;
}

console.log(isTouchDevice());

我要提到的最后一个好处是，该代码是框架和设备不可知的。享受吧!

我使用:

if(jQuery.support.touch){
    alert('Touch enabled');
}

jQuery mobile 1.0.1

不，不可能。给出的优秀答案永远都是片面的，因为任何给定的方法都会产生假阳性和假阴性。由于操作系统api的原因，甚至浏览器也不总是知道是否存在触摸屏，而且在浏览器会话期间，这一事实可能会发生变化，特别是使用kvm类型的安排。

详见这篇优秀的文章:

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

这篇文章建议你重新考虑那些让你想要检测触摸屏的假设，它们可能是错误的。(我检查了我自己的应用程序，我的假设确实是错误的!)

文章总结道:

对于布局，假设每个人都有触摸屏。鼠标用户可以使用大型UI控件比触摸用户使用小控件容易得多的人。悬浮状态也是如此。对于事件和交互，假设任何人都有触摸屏。实现键盘、鼠标和触摸交互，确保互不妨碍。

使用上面所有的注释，我已经组装了下面的代码，是为我的需要工作:

var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));

我在iPad、Android(浏览器和Chrome)、黑莓Playbook、iPhone 4s、Windows Phone 8、IE 10、IE 8、IE 10(带触摸屏的Windows 8)、Opera、Chrome和Firefox上进行了测试。

它目前在Windows Phone 7上无法运行，我还没有找到针对该浏览器的解决方案。

希望有人觉得这有用。

由于引入了交互媒体功能，你可以简单地做到:

if(window.matchMedia("(pointer: coarse)").matches) {
    // touchscreen
}

https://www.w3.org/TR/mediaqueries-4/#descdef-media-any-pointer

更新(由于评论):上面的解决方案是检测“粗指针”——通常是触摸屏——是否是主要输入设备。如果你想检测一个带有鼠标的设备是否也有触摸屏，你可以使用任意指针:粗。

有关更多信息，请查看这里:检测浏览器没有鼠标，只能触摸

推荐文章