jQuery solution to detect for touch only device?

Question

I have designed my site with an image gallery that does not display the next / previous arrows until the mouse is rolled over them .next:hover{display: block} This is fine but the site is fluid and I did not think at all that hover (mouse over) does not work on touch screen! I do not want to keep the arrows on constant display unless the device is touch screen only like an ipad for example!

What is the best way to detect if the device is touch only and if so change display: none to display block automatically. Is there a jQuery way of doing this?

I hope this makes sense, I have googled it and search on S.O. but am unable to find a direct answer. That along with the fact that I am a bit (understatement) of a novice when it comes to jQuery!

Thank you for any help

Check out answers of http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript this question — Pravin W, Apr 16 '14 at 05:53
Wow! If I cannot find the answer there there is no answer! It seems that Modernizr is what I may need. I will look into that and option as it seems to do what I am looking for the question in that post is very similar to mine. Thank you for your help. — Margate, Apr 16 '14 at 05:59
Other than Modernizr if you are looking responsive design tutorial - 1) http://webdesignerwall.com/tutorials/responsive-design-in-3-steps 2) http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ which will help you to write CSS for specific range of devices — Pravin W, Apr 16 '14 at 06:08

score 0 · Answer 1 · answered Aug 10 '17 at 12:16

I worked something out like this, the click counter also fires on touch events when I was testing it.

// 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++;
});

score -1 · Answer 2 · answered Jun 22 '17 at 00:54

I was in a same situation like you but, I did not wanted to use Modernizr, so as a quick fix I just checked for the window width.Most of the touch devices including tablets falls below the width of <=1024. So I wrote the below piece of code inside document.ready:

$(document).on("ready", function() {

   if ( $(window).width() < 1025 ){
       //Insert your code to add/display something different for mobile/tablet devices
   }

});

Hope it helps someone.

jQuery solution to detect for touch only device?

2 Answers2