Detect phone/tablet/web client using javascript

Question

I am trying to detect if the end user is on a phone, a tablet or a pc

I have been Googling for a while, apparently there are no easy solution.

Well I guess I should not use Resolution, since nowadays some tablets have amazing resolutions.

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

I've been trying to use UserAgent(thought it has its drawbacks too), but can not get it working, below is a conjunction of different versions online that I am using to distinguish phone/tablet from PCs, 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;
            }

Artieartifact

They're about the same and should work. What do you mean they don't work ? What's the userAgent ? – Appanage

How do they 'just do not work'? – Burlingame

Why do you need to decide for tablet/phone/pc? It's not like you should add a control if you suspect that person doesn't have a physical keyboard (what is Asus Transformer, after all?) – Safari

Asus PadFone complicates things further. It can switch from phone to tablet at runtime, IIUC – Safari

well..all of above just do not return true. I honestly have no idea why this would happen – Artieartifact

Answer 1

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

In order to read the results of your media query with javascript, you could 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 load:

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

Urinalysis

Answer 2

User Agents are pretty unreliable, and can actually be faked by clients. I would recommend to focus on specific functionality instead of specific devices. Modernizer is a library that can be used to detect if features are available on the client device. This will allow you to detect if things like local storage, etc are available. If you are interested in something like Responsive Web Design instead of device/client specific features, you could use a library like Twitter's Bootstrap. At the bottom of the Scaffolding page, it even has some features that enable detection of phone vs. tablet vs. 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 actually care what device the user is on. It will be much easier to detect the specific feature you care about than it will be to detect all features that are available.

Heads

There could be situations where you need to know what type of device the user is on, and feature detection won't assist - such as disabling certain effects for performance considerations. – Blastoff

Analytics also plays up the importance of knowing the users device – Hilary

Answer 3

I'd recommend looking into media queries and the <viewport> tag.

Some excellent articles on the thought processes behind 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?

Frostbite

Answer 4

Quick answer why match of agent does not work against the given list: "Android" is not in the returned (agent) string! Just assume that NONE of the given strings are correct and liars abound.

I have posted tested code proving the android case.

Memorialist

Sorry; i was told that was impossible to do nevemind i got it to work; – Memorialist