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/

3
  • 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, 2013 at 10:46
  • based up on the Width of Target you can evaluate the Si\e
    – Akshay Joy
    May 13, 2013 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, 2013 at 11:09

2 Answers 2

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

4
  • [Disclaimer]: the site "useragentstring.com" has not mentioned iphone, ipad and ipod. please include them too.
    – Mr_Green
    Jul 31, 2015 at 7:35
  • 1
    What screen.width and screen.height does I use for difference between Samsung devices (like Note) and smaller tablets?
    – user4400167
    Aug 29, 2015 at 18:55
  • no need for uppercase in the regex if you already have /i at the end
    – ccpizza
    Sep 4, 2018 at 18:33
  • Careful with userAgent detection. IE 11 user agent includes "iPhone"...
    – gtournie
    Dec 31, 2018 at 5: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.

11
  • 3
    Ehrm may might ask, what wurfl.js is actually doing? it is pretty much unreadable.
    – Toskan
    Feb 13, 2015 at 5: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, 2015 at 5: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, 2015 at 12:45
  • 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… Sep 1, 2017 at 8: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: scientiamobile.com/page/movr-mobile-overview-report
    – Luca P.
    Sep 2, 2017 at 11:45

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