我编写了一个jQuery插件，可以在桌面和移动设备上使用。我想知道是否有一种方法可以用JavaScript来检测设备是否具有触摸屏功能。我使用jquery-mobile.js来检测触摸屏事件，它适用于iOS, Android等，但我也想根据用户的设备是否有触摸屏来编写条件语句。
这可能吗?
当前回答
由于引入了交互媒体功能，你可以简单地做到:
if(window.matchMedia("(pointer: coarse)").matches) {
// touchscreen
}
https://www.w3.org/TR/mediaqueries-4/#descdef-media-any-pointer
更新(由于评论):上面的解决方案是检测“粗指针”——通常是触摸屏——是否是主要输入设备。如果你想检测一个带有鼠标的设备是否也有触摸屏，你可以使用任意指针:粗。
有关更多信息，请查看这里:检测浏览器没有鼠标，只能触摸
其他回答
由于Modernizr无法检测Windows Phone 8/WinRT上的IE10，一个简单的跨浏览器解决方案是:
var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
你只需要检查一次，因为设备不会突然支持或不支持触摸，所以只需将它存储在一个变量中，这样你就可以更有效地多次使用它。
我喜欢这个:
function isTouchDevice(){
return window.ontouchstart !== undefined;
}
alert(isTouchDevice());
我认为最好的方法是:
var isTouchDevice =
(('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0));
if(!isTouchDevice){
/* Code for touch device /*
}else{
/* Code for non touch device */
}
我使用:
if(jQuery.support.touch){
alert('Touch enabled');
}
jQuery mobile 1.0.1
实际的答案似乎是一个考虑上下文的答案:
1)公共站点(无法登录) 编写UI代码以同时使用这两个选项。
2)登录站点 捕获登录表单上是否发生了鼠标移动，并将其保存到隐藏的输入中。该值与登录凭据一起传递，并添加到用户的会话中，因此可以在会话期间使用它。
Jquery只添加到登录页面:
$('#istouch').val(1); // <-- value will be submitted with login form
if (window.addEventListener) {
window.addEventListener('mousemove', function mouseMoveListener(){
// Update hidden input value to false, and stop listening
$('#istouch').val(0);
window.removeEventListener('mousemove', mouseMoveListener);
});
}
(@Dave Burt +1， @Martin Lantzsch +1)
