javascript - Detect phone vs tablet

Question

Is there a way to detect if the user is using a tablet or a phone? As an example a person surfing the web using a tablet (any android tablet with version 3+ and iPad) they would surely like to view the same not stripped down version as a person sitting with a desktop computer. And a phone surfer would surely prefer the stripped down version of the site because its quicker to load and might be easier to navigate with your thumb. This could be done with checking userAgent oct screen width found here:

What is the best way to detect a mobile device in jQuery?

But the problem comes with a phone like Google Galaxy Nexus which has the same resolution as a tablet but only half the screen size. In my opinion it would be nicer to show the mobile version since the screen is small even though the resolution is high.

Is there a way to detect this or do I have to make a compromise?

Answer 1

I think you're making a fundamentally arbitrary distinction between tablet, phone, or any other web enabled device here. It seems like the physical dimensions of the screen is the metric you want to use to dictate the content you serve.

In this case I would try to implement logic based on values passed by the user agent in the HTTP headers ([mobiforge.com...]) and degrade gracefully to prompting the user if information isn't available.

Your logic might look a bit like this:

• If the user agent supplies a physical screen size in HTTP headers
  physical dimensions = UA value.
  
• otherwise, if the user agent supplies a resolution and pixel dimensions
  physical dimensions = pixel dimensions divided by resolution.
• (optionally) otherwise, use client side script to detect resolution and PPI
• otherwise, if the user agent string looks like some kind of mobile device (regex)
  prompt the user to select.
• otherwise
  assume a default option.

---

Update: My answer is now three years old. It's worth noting that support for responsive design has progressed significantly and its now common to deliver the same content to all devices and rely on css media queries to present the site in a way that is most effective for the device it is being viewed on.