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;
            }

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.
}

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.

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?

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.