jQuery解决方案，用于检测纯触摸设备

Question

我为我的网站设计了一个图像库，在鼠标悬停在它们上面之前，它不会显示下一个/上一个箭头.next:hover{display: block}这很好，但网站是流动的，我根本没有想到悬停（鼠标悬停）在触摸屏上不起作用！我不想一直显示箭头，除非设备像ipad一样是触摸屏！

检测设备是否仅为触摸，如果是，则更改显示的最佳方法是什么：无自动显示块。有jQuery的方法吗？

我希望这是有道理的，我已经在谷歌上搜索了它，但无法找到直接的答案。再加上我在jQuery方面有点（轻描淡写）新手的事实！

感谢您的帮助

Answer 1

我做了这样的事情，当我测试它时，点击计数器也会触发触摸事件。

// Detect touchscreen only
var touchscreenonly = true;
var moves = 0;
var clicks = 0;
$("body").mousemove(function() { 
    moves++;
    if (moves > clicks + 1){
        touchscreenonly = false;
        // now unbind these functions if you like
        $(this).unbind("mousemove").unbind("click");
        console.log('mouse moved, this is not a touch-only device');
    }
}).click(function(){ 
    clicks++;
});

Answer 2

我和你处于同样的情况，但我不想使用Modernizr，所以作为一个快速解决方案，我只检查了窗口宽度。包括平板电脑在内的大多数触摸设备都低于<所以我在文档中写了以下代码

$(document).on("ready", function() {
   if ( $(window).width() < 1025 ){
       //Insert your code to add/display something different for mobile/tablet devices
   }
});

希望它能帮助到别人。