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

Solution 1:

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

Solution 2:

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.

Solution 3:

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

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

Solution 4:

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