Reputation: 3597
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
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
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
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
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