How to make JQuery responsive?

Question

This is the situation : I need to make JQuery responsive for my app, for example to make the Google Map draggable:true on the pc and false on tablet and phone, and i am facing this argument for the first time. I am making some tests.

This is what have done : I try to study the best way to approach it, and the best way (that is working properly) it seems to be found in this SO answer:

What is the best way to detect a mobile device in jQuery?

In the specific, This is the code :

 var isMobile = navigator.userAgent.match(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/); 

 if (isMobile) {
     alert('is not pc');
   }
 else {
     alert('is a pc');
   }

This is a simple test:

http://jsbin.com/IroMAQi/1/edit

Other solutions founded : Have found interesting also this approach:

Do something if screen width is less than 960 px

But strange enough, with my tablet Samsung Galaxy Tab 3 the first solution is not working.

This is the question :

The best way to make JQuery responsive is to detect the navigator.userAgent.match?

If yes, how can i be sure to include in the list all the possible devices? For example i know that just recently has been published the new Firefox phone, how can i include also that device? There is perhaps a kind of list with all different possibilities?

Thank you very much!! Sorry if it is a stupid question, is that i am knew in this, and at this point only Stack Overflow can clarify this for me!

Answer 1

The problem with user agent detection is that it has to be maintained to cover current devices. It is hard to know the user agent of every possible device and/or browser. In short it is a very unreliable and not a future proof way to detect mobile devices.

Currently one of the most favoured ways of detecting mobile devices and using javascript responsively is through the Modernizr library .

In terms of responsive javascript/jQuery you should be looking at the Modernizr.mq feature in particular.

It's also worth noting that the hasEvent function is useful to detect touch devices.

Code example:

// Tablet and larger (768px)
if (Modernizr.mq('(min-width: 48em)')) {
  // Code here..
}

// Laptop and up (960px)
if (Modernizr.mq('(min-width: 60em)')) {
  // Code here..
}

// Touch devices
if (Modernizr.hasEvent('gesturestart')) {
  // Code here...
}