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

Answer 1

You can use something like Device Atlas to detect these features off the User Agent. The offer an API that you can host yourself, and they also offer a cloud service. Both are premium (paid-for)

Alternatively you can use something like Wurfl which, in my experience, is less accurate.

Answer 2

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.

Answer 3

Unfortunately, as of now, the only reliable way to distinguish between mobile and tablet is via the user agent string.

I have yet to find a user agent that includes device dimensions.

If you try to calculate the device ppi, they almost all inevitably come out to 96ppi, whether a desktop or a phone.

Search for iPad/iPod/iPhone in the user agent string to detect any Apple device. This will tell you if you have a tablet or phone/iPod from Apple. Fortunately, there are far fewer flavors of i-devices, so it will also be easier to distinguish amongst them.

To identify an Android device, search for "Android" in the user agent string. To determine if it is a tablet or a phone, the phone user agent (for native android browser and chrome) will contain "Mobile Safari", whereas the tablet will only contain "Safari". This method is recommended by Google:

As a solution for mobile sites, our Android engineers recommend to specifically detect “mobile” in the User-Agent string as well as “android.”

A fuller description can be found here:

http://googlewebmastercentral.blogspot.com/2011/03/mo-better-to-also-detect-mobile-user.html

Of course this is not ideal, but looks to be the only reliable means. As a warning, from looking at a large sample list of user agent strings (near one hundred), I did see one or two older devices that did not adhere to the "Mobile" vs. "Mobile Safari" distinction properly.

Answer 4

I think WURFL might be something to look at: http://wurfl.sourceforge.net/help_doc.php Its a bit more hardcore since its more server-side solution rather than doing it simply via simple media queries (for example your own or using a framework like Foundation CSS) or with pure javascript (adapt.js).

Than can do something like:

$is_wireless = ($requestingDevice->getCapability('is_wireless_device') == 'true');
$is_smarttv = ($requestingDevice->getCapability('is_smarttv') == 'true');
$is_tablet = ($requestingDevice->getCapability('is_tablet') == 'true');
$is_phone = ($requestingDevice->getCapability('can_assign_phone_number') == 'true');

if (!$is_wireless) {
 if ($is_smarttv) {
  echo "This is a Smart TV";
 } else {
  echo "This is a Desktop Web Browser";
 }
} else {
 if ($is_tablet) {
  echo "This is a Tablet";
 } else if ($is_phone) {
  echo "This is a Mobile Phone";
 } else {
  echo "This is a Mobile Device";
 }
}

ref: http://wurfl.sourceforge.net/php_index.php

or in Java:

WURFLHolder wurfl = (WURFLHolder) getServletContext().getAttribute(WURFLHolder.class.getName());
WURFLManager manager = wurfl.getWURFLManager();
Device device = manager.getDeviceForRequest(request);
String x = device.getCapability("is_tablet"); //returns String, not boolean btw

ref: http://wurfl.sourceforge.net/njava_index.php

Answer 5

As many other posters have noted, your are likely going to want to parse the User-Agent request header. For this purpose, I found the ua-parser-js library very helpful.

Answer 6

Why try to guess what the user has when you can ask them? You can use the resolution to guess which sort of device is being used, and ask the user which view they want if it falls into the category of possibly mobile or tablet. If you detect it wrong then it's a nuisance for the user. Asking them once which type of device they have is more convenient in my opinion.