28

I am developing an web application where I need to detect the device from javascript. Could anybody tell me whats the best way to do it ? I found several solution by googling. But no one is full proof. I do not want to use server side detection like WURFL.

My update

I am detecing device by matching CSS media queries using javascript. For media query matching using polyfill by Paul Irish https://github.com/paulirish/matchMedia.js/

MAK Ripon
  • 1,065
  • 4
  • 14
  • 27
  • 1
    There's a reason it's not full-proof. All of http/web/clients working together is by implicit agreement/contract, and by nature unregulated. Any solution you find will be imperfect by construction, and your best solution at this point is simply a responsive approach. – Justin L. May 13 '13 at 10:46
  • based up on the Width of Target you can evaluate the Si\e – Akshay Joy May 13 '13 at 10:48
  • @JustinL. : I have the responsive design already. But I want some parts to be lazily loaded based on device detection. – MAK Ripon May 13 '13 at 11:09

2 Answers2

51

You can use:

  1. JS: Detect by user agent

     if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i))

    Take the user agent strings from here: http://www.useragentstring.com/pages/useragentstring.php.

  2. CSS: Use responsive design

  3. JS: Detect the screen width by screen.width

shA.t
  • 16,580
  • 5
  • 54
  • 111
  • [Disclaimer]: the site "useragentstring.com" has not mentioned `iphone`, `ipad` and `ipod`. please include them too. – Mr_Green Jul 31 '15 at 07:35
  • 1
    What screen.width and screen.height does I use for difference between Samsung devices (like Note) and smaller tablets? –  Aug 29 '15 at 18:55
  • no need for uppercase in the regex if you already have `/i` at the end – ccpizza Sep 04 '18 at 18:33
  • Careful with userAgent detection. IE 11 user agent includes "iPhone"... – gtournie Dec 31 '18 at 05:43
29

I advise you check out http://wurfl.io/

In a nutshell, if you import a tiny JS file:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

you will be left with a JSON object that looks like:

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

(that's assuming you are using a Nexus 7, of course) and you will be able to do things like:

if(WURFL.form_factor == "Tablet"){
    //dostuff();
}

This is what you are looking for.

Disclaimer: I work for the company that offers this free service. Thanks.

Luca P.
  • 1,021
  • 8
  • 20
  • 3
    Ehrm may might ask, what wurfl.js is actually doing? it is pretty much unreadable. – Toskan Feb 13 '15 at 05:44
  • 15
    I mean it is nice and everything, but one day you guys will decide to take down the service or ask for fees, leaving my customers with no detection. Or yeah, your server goes down. Then what? This js file will NOT work when copy pasting it from your server. – Toskan Feb 13 '15 at 05:57
  • 1
    ScientiaMobile will not take down the service. We will also offer an upgraded subscription-based version of WURFL.js called Business Edition. This will give developers choice: A free version (for the hobbysts and small shops) and a business-grade version for companies who can use the extra features. The JS file you receive is minimized, but there is no particular magic in there. It's just JSON with device data and some cookie handling. The power of WURFL.js is in the backend, where a fully-fledged instance of the WURFL Device Detection framework is running. – Luca P. Feb 14 '15 at 12:45
  • For the record, the Business Edition of the WURFL.js service is now available. More info here. Thanks http://www.scientiamobile.com/page/wbe – Luca P. Apr 15 '15 at 14:20
  • 8
    I don't really see why one should publish some of its customer's personal information to a third-party backend, just to check whether the customers use tablets or laptops… – e741af0d41bc74bf854041f1fbdbf Sep 01 '17 at 08:32
  • 1
    I guess that info such as IP number and device screen size fall under the broader definition of "personal information". On the other hand, if by personal information we imply people's age, gender, where they live, what they like and so on, ScientiaMobile does not obviously collect, nor has the possibility to collect, any of that. We can, of course, use that data feed to gain insight into mobile market trends, which we do and which we happily share with the world free of charge through the quarterly MOVR report: https://www.scientiamobile.com/page/movr-mobile-overview-report – Luca P. Sep 02 '17 at 11:45
  • 1
    It is probably also worth mentioning that we have a companion product called WURFL.js Business Edition which is meant for the enterprise and which some big names in the industry have adopted. Companies that are super-sensitive about their users' data can talk to ScientiaMobile and we can have provisions that mitigate their concerns about how that data is handled by ScientiaMobile. That discussion happens as part of a commercial deal, of course. – Luca P. Sep 02 '17 at 11:50
  • WURFL uses eval(), which is generally considered a risk, especially when used in 3rd party scripts... – SHamel Nov 02 '17 at 18:11
  • 1
    I am not sure I follow the logic. If you decide to add a third-party javascript, it's because you trust that third-party. If you don't trust them you shouldn't add the script in the first place, eval() or not. – Luca P. Nov 03 '17 at 19:11
  • This is not working for me. In all cases i am getting form_factor as 'Desktop'..:( – Srinivas Mar 27 '18 at 07:02
  • In all cases? this is interesting. What configuration are you using for testing? Did you try it with different devices? – Luca P. Mar 28 '18 at 12:31