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

They're about the same and should work. What do you mean they don't work ? What's the userAgent ? — Denys Séguret
– Denys Séguret, Commented Feb 26, 2013 at 22:04
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?) — John Dvorak
– John Dvorak, Commented Feb 26, 2013 at 22:06
Asus PadFone complicates things further. It can switch from phone to tablet at runtime, IIUC — John Dvorak
– John Dvorak, Commented Feb 26, 2013 at 22:07
well..all of above just do not return true. I honestly have no idea why this would happen — Matthew Yang
– Matthew Yang, Commented Feb 26, 2013 at 22:18

Jani Hyytiäinen · Accepted Answer · 2013-02-27 00:05:09Z

13

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

answered Feb 27, 2013 at 0:05

Jani Hyytiäinen

5,40738 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TwentyMiles · Accepted Answer · 2013-02-26 23:02:34Z

3

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.

answered Feb 26, 2013 at 23:02

TwentyMiles

4,0893 gold badges32 silver badges38 bronze badges

2 Comments

Aaron Over a year ago

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.

random-forest-cat Over a year ago

Analytics also plays up the importance of knowing the users device

Adrian J. Moreno · Accepted Answer · 2013-02-26 23:10:58Z

2

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?

answered Feb 26, 2013 at 23:10

Adrian J. Moreno

14.9k1 gold badge41 silver badges46 bronze badges

Comments

Robert Baer · Accepted Answer · 2013-09-05 03:32:11Z

-1

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.

answered Sep 5, 2013 at 3:32

Robert Baer

1

1 Comment

Robert Baer Over a year ago

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

Collectives™ on Stack Overflow

Detect phone/tablet/web client using javascript

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related