2

What would be the best solution to detect if the user is on a device with keyboard with arrow and esc keys, or is on a mobile device with touch functionality - like swipe?

I have a image gallery which I would like to display either arrow keys if they are on a device with a keyboard.
Or, if they are on a mobile device, I would like to tell them to swipe left or right.

Here's my gallery : http://kiledesign.no/?side=Foto&vis=Galleri

I have modified the core code for the gallery plugin (jQuery Gridder) so the user can use the arrow keys left/up for previous image, and right/down for next image.
I have also included esc-key to close the full view.

In addition, I have added jquery mobile swipe left (prev)/right (next).

Now I would like to find a way to determen which tips to present based on what device.

I thought about css media query. Like min-width.
But there is mini-computers with quite small screens, and there's tablet, or even phones with quite high resoultions...
So I don't think it's a fool-proof solution...

Any suggestion?

ThomasK
  • 2,210
  • 3
  • 26
  • 35

1 Answers1

1

You can use navigator.userAgent to check if agent is computer or mobile like this: 

var isMobile = /iPhone|iPad|iPod|Android...etc/i.test(navigator.userAgent);
if (isMobile) {
  /* Set your code here */
}

Also may detect if device is has an touch screen or no like this:

function is_touch_device() {
  var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
  var mq = function(query) {
    return window.matchMedia(query).matches;
  }

  if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
    return true;
  }

  // include the 'heartz' as a way to have a non matching MQ to help terminate the join
  // https://git.io/vznFH
  var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
  return mq(query);
}

This second code answer copy from link.

Anees Hikmat Abu Hmiad
  • 3,460
  • 2
  • 19
  • 36