Browser Detection - Mobile vs. PC

Question

So I've read a handful of the threads on browser detection and feature detection, and I'm not exactly sure where what I need to do falls in the spectrum of that discussion.

I have a game site. People can play the game on a pc or a mobile device. They can also configure how they would like the game to work. For example, they can choose to play cards by single-clicking them or double-clicking them. However, double-clicking isn't an option option on mobile devices, so some people get stuck, because they pick that option and the javascript doesn't work.

So I thought, I'll let people specify one set of preferences for mobile devices, and another set of preferences for PCs, and only offer the options available on those devices. However, I'm reading that detecting a PC vs. a mobile device is a bad way to go.

So then, if I'm feature detecting, what exactly am I detecting? There's no way to detect if a device specifically supports a double-click, is there?

Answer 1

You will never be able to detect where it's a PC or Mobile device accessing your website efficiently, because there are soooo many devices and they change constantly. The only way to do it is by inspecting the browser agent string which is pretty tedious; there are thousands of it. Furthermore, it can be spoofed, so it's not a good source of information. The best you can do (which is what many professionals do, including me) is using feature-detection techniques - screen resolution, supported html tags, supported css properties, etc.

A good tool is Modenizr js library which is feature-based and you can check whether the device supports touch events, if it does, then you know that double-clicking will not be an option for you.

Here's a link to some documentation http://modernizr.com/docs/#features-misc

Answer 2

Seems what you really want to do is test for touch support, try Detecting touch: it’s the ‘why’, not the ‘how’.

A common suggestion is:

if (document && document.element && 'ontouchstart' in document.documentElement) {
  ...
}

But that is likely to fail in some browsers. A longer method, though probably no more accurate, is to test for event support directly:

  /* Feature tests for TouchEvent and GestureEvent modules
   * implemented in Mobile Safari on iPhone
   *
   * The TouchEvent module is a draft (18/08/2008) that supports:
   *
   *   touchstart
   *   touchmove
   *   touchend
   *   touchcancel
   *
   * The GestureEvent module is a draft (18/08/2008)
   * that supports:
   *
   *   gesturestart
   *   gesturechange
   *   gestureend
   *
   * The functions require support for try..catch, introduced
   * in ECMA-262 ed3, JavaScript 1.4 and JScript 5.1.5010.
   * Equates to Navigator 4.0 or later and IE 5.1 or later
   * (http://pointedears.de/scripts/es-matrix/)
   *
   * If W3C DOM 2 Event document.createEvent is supported, 
   * return either true or false,
   * otherwise return undefined.
   */
   function touchSupported() {
     if (document && document.createEvent) {
       try {
         document.createEvent('TouchEvent');
         return true;
       } catch (e) {
         return false;
       }
     }
   }

   function gestureSupported() {
     if (document && document.createEvent) {
       try {
         document.createEvent('GestureEvent');
         return true;
       } catch (e) {
         return false;
       }
     }
   }

It was written in 2008, I've only really used it on Safari and iPhone though it seems to work elsewhere. Test thoroughly.