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 es 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?

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 es 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?

• javascript
• mobile-website
• screen-resolution

4 Answers 4

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

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.

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
}

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