0

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?

3
  • It seems to me that your issue is touch UI vs cursor UI, which does not necessarily correlate to mobile vs PC (presumably desktop). Maybe offer settings for touch and settings for cursor (or pointing device) and let the user select one or the other.
    – RobG
    Dec 12, 2013 at 3:02
  • So I did this (sounded correct in theory) but in practice how do I go about this? I tried using Modernizr.touch to identify if certain browsers are touch-enabled or not, and it doesn't work (or doesn't work how I would expect it to work). Dec 15, 2013 at 16:13
  • I have a simple feature test for touch support, I'll post it in a few hours.
    – RobG
    Dec 16, 2013 at 2:58

2 Answers 2

1

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.

0

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

5
  • I'd vote this down if I could, but I don't have the reputation. I went to Modernizr, and I implemented the touch feature detection, and now I'm in a very bad place with my site. It's not working! There are a ton of people coming to my site, on computers, and modernizr is saying they are using touch-enabled devices when in fact they aren't. I would strongly recommend people avoiding using Modernizr for touch detection! Dec 15, 2013 at 16:10
  • Here's an example. This browser/os combination returns "true" for touch, but it's not a touch device (to my knowledge): (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36 Dec 15, 2013 at 16:36
  • Ok, in fairness, I am guessing Modernizr is doing the right thing, I just asked it the wrong question. I assumed (incorrectly), that having a touch device meant you couldn't use double-click. In reality, some devices support both. What I should really be doing is not detecting touch devices (as suggested by this answer), but instead detecting whether a device supports a double-click. This statement (and my thinking too!) in the above answer is incorrect "if it does, then you know that double-clicking will not be an option for you." because some devices support both. Dec 15, 2013 at 17:33
  • 1
    Well, mate, sorry if that "statement" caused some confusion because it's not 100% correct. But, my answer as a whole evolves around the fact that detecting devices is ridiculous, not to say detecting whether it is mobile or PC because it makes no difference. It's feature detection what you should be focusing on. Lastly, "in fairness", you deserve the results you are getting because of your lack of own research, investigation, poor developing and testing skills. You shouldn't be publishing to production something that has hardly been tested
    – Leo
    Dec 16, 2013 at 1:24
  • 1
    Sorry man, I wouldn't have down-voted because of the feature-detection vs. pc/mobile detection. That I certainly agree with, and appreciate. But, you gave a specific solution recommendation, use Modernizr touch, and that didn't work. When a solution doesn't work, I'm going to say so, so that other people who come across this later (as we always do ourselves) can see discussion and the outcome. It certainly wasn't meant as a personal attack, and I'm sorry that you felt it was. Dec 16, 2013 at 15:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.