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

Question

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 th

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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
}