Detecting phone / tablet / web client using javascript

Question

I am trying to determine if the end user is on a phone, tablet or PC

I searched Google for a while, apparently there is no easy solution.

Well, I think I shouldn't use Resolution, as some tablets currently have awesome resolutions.

I should not rely on orientation, because Windows8 laptops can just spin like tablets. (and responsive design is too complicated for my current project)

I am trying to use UserAgent (I thought that it also has its drawbacks), but it cannot make it work. Below is the connection of different versions on the Internet, which I use to distinguish a phone / tablet from a PC, they just do not work, and I have no idea why

var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry','iemobile','phone','mobile']; for(i in agents) { if(navigator.userAgent.toLowerCase().match('/'+agents[i]+'/i')) { return true; } } if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { return true; } if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) || navigator.userAgent.match(/bada/i) || navigator.userAgent.match(/Bada/i) ){ return true; } 

Answer 1

Yes, you should not rely on resolution or orientation. But what about em-based media queries?

To read the results of your media query using javascript, you can try adding a media query to your css to add invisible content to your page:

 @media all and (max-width: 45em) { body:after { content: 'smallscreen'; display: none; } } 

Then read the content through javascript:

 var size = window.getComputedStyle(document.body,':after').getPropertyValue('content'); 

Then determine what you want to download:

 if (size.indexOf('smallscreen') !=-1) { // Load some content for smaller screens. } 

Answer 2

User agents are rather unreliable and can actually be faked by clients. I would recommend focusing on specific features, rather than specific devices. A modernizer is a library that can be used to detect the presence of functions on a client device. This will let you determine if things like local storage, etc. are available. If you're interested in something like Responsive Web Design instead of device / client features, you can use a library like Twitter Bootstrap . At the bottom of the Scaffolding page there are even some features that allow you to detect the phone and tablet against the desktop, although I believe that it is based on resolution.

- Edit to add -

I would also like to emphasize that you should ask yourself why you really care about which device the user is on. It will be much easier for us to discover the specific function that you care about, rather than finding all the available functions.

Answer 3

I would recommend looking for media queries and the <viewport> .

Some excellent thought process articles for responsive design.

http://www.html5rocks.com/en/mobile/mobifying/

http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand

The question remains, what are you trying to accomplish?

Answer 4

The quick answer is why the agent match does not work against this list: "Android" is not in the returned (agent) line! Just assume that NONE from the given lines is true and liars abound.

I sent a verified code confirming the Android case.