How to detect device type using javascript

javascript mobile tablet
MAK Ripon picture MAK Ripon · May 13, 2013 · Viewed 65.9k times · Source

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/

Answer

user2050393 picture user2050393 · May 13, 2013

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

Related questions

JavaScript how to check User Agent for Mobile/Tablet

I'm currently developing some JS work for a clients website which has different functionality across desktop and tablet platforms. Consider: if(! navigator.userAgent.match(/Android/i) && ! navigator.userAgent.match(/webOS/i) && ! navigator.userAgent.match(/iPhone/i) &…

Read More
How to fit to screen after changing viewport width on orientation change?

I need the viewport width for a page to be 950px in landscape and 630px in portrait. These pixel widths are unfortunately inflexible. I'm adjusting the width of the DOM content based on orientation using CSS media queries. I'm listening …

Read More
Touch API (e.g. touchstart) not working in MS Edge

my application is using the Touch API to detect touch events in JavaScript. Example: $(".element").on("touchstart", function(event){ alert("TRUE"); }); This works on any touch device with any browser like Android or iOS, however it doesn't work in MS …

Read More