asp_net
asp_net

Reputation: 3597

What's the best way to detect whether the client is a tablet or a phone?

I am currently developing a client side application which will be designed for both, smartphones and tablets. Therefore it will get two different layout modes.

While the user will be able to switch between the two modes, I will have to pre-set the mode by the first use of the app.

So I am looking for a reliable way to automatically detect whether the user comes with a pad or a smartphone (desktop browsers aren't relevant).

I could check the browsers resolution, but I am uncertain if that's the right way to Rome, as the resolution of the iPhone 4 with 960x640px is nearly as high as the screen resolution of the iPad with 1024x768, and to keep in mind the android devices.

Any suggestions?

Upvotes: 3

Views: 8375

Answers (4)

Ben
Ben

Reputation: 7597

+1 for testing screen resolution rather than user agent (and iPhone vs iPad is a very simplistic test anyway—what about all those other tablet devices??)

In terms of testing for iPhone 4, i.e. retina displays, this test should work in your Javascript:

if(window.devicePixelRatio > 1){
    // Retina device...

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34863

You could detect whether it is a phone using a http://detectmobilebrowser.com/ script. If not, you can assume it is a tablet (since, as you mentioned, desktop browsers are irrelevant for this app).

Upvotes: 6

Adam Heath
Adam Heath

Reputation: 4763

I would go with detecting the screen resolution, as it should not really matter if the browser is a phone or tablet, the only thing that should affect is the layout. And the best thing to determine which sized layout to use, would be the resolution.

Upvotes: 2

Will
Will

Reputation: 20245

One way to do it is to check the user agent.

var UA = navigator.userAgent;
if (UA.indexOf("iPad") != -1) {
    // iPad
} else if (UA.indexOf("iPhone") != -1) {
    // iPhone
}

Upvotes: 0

Related Questions