1

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!

Community
  • 1
  • 1
FrancescoMussi
  • 17,011
  • 36
  • 113
  • 166
  • Have you looked into CSS media queries? And Modernizr? You should detect features not devices. – elclanrs Dec 30 '13 at 11:34
  • Shouldn't the regex you're using have the `i` flag? _"how can i be sure to include in the list all the possible devices?"_ - By definition you can't include _all possible_ devices since the people creating browsers (for desktops or mobile devices) could take it into their heads to do all kinds of strange things. We don't know what will happen in the future... – nnnnnn Dec 30 '13 at 11:35
  • 1
    If you are using PHP on the server-side you can consider using [MobileDetect](http://mobiledetect.net/) class. – undefined Dec 30 '13 at 11:41

1 Answers1

4

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...
}
forsvunnet
  • 1,173
  • 8
  • 17
  • Thank you @forsvunnet for reply! Can you please post a very simple example of how you would make the IF statement to detect if it is a pc or not. The fact that now also portable pc are touch-enabled, automatically exclude the fact to check if the device is touch-enabled or not, right? If you please can post the proper if statement, i will check your answer as correct! Thank you! – FrancescoMussi Dec 30 '13 at 13:53
  • @johnnyfittizio I've updated the answer with code. I hope it helps. As mentioned in the comments, it's good to design for features, not devices. My argument for doing so is because at the end of the day you really do not know what device your user is going to use and in what year. Will your design still work 10 years from now? – forsvunnet Dec 31 '13 at 19:20