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?

score 19 · Accepted Answer · edited May 23 '17 at 10:31

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.

score 8 · Answer 2 · edited Jun 15 '19 at 21:42

8

Based on google's suggestion: found here (also referenced by Greg) this is what I have used in projects before.

if (/mobile/i.test(navigator.userAgent) && !/ipad|tablet/i.test(navigator.userAgent)) {
    console.log("it's a phone"); // your code here
}

It's maybe not the most elegant solution... but it does the job.

edited Jun 15 '19 at 21:42

K-Gun

10,121
2
50
56

answered Jul 11 '14 at 18:52

Fernando

349
3
9

ryan j · Answer 3 · 2012-03-02T13:44:32.150

If you're using media queries in theory you could use @media handheld but support is pretty much non-existent.

Simplest way of identifying high res mobile devices would be to look at the DPI of the screen and the device-pixel-ratio (via webkit/mozilla vendor specific tags currently)

@media (-webkit-max-device-pixel-ratio: 2),  
(max--moz-device-pixel-ratio: 2), 
(min-resolution: 300dpi) {
   ...
}

edit: window.devicePixelRatio to do the above in JS

There is a nice article here with lots of ideas for identifying mobile devices.

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

btw. Personally i'd avoid sniffing the UA if at all possible. — ryan j, Mar 02 '12 at 12:58

score 2 · Answer 4 · answered Oct 18 '13 at 21:41

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.

score 2 · Answer 5 · answered Aug 17 '15 at 21:12

2

If you are using Cordova I like this:

cordova plugin add uk.co.workingedge.phonegap.plugin.istablet

then anywhere in your code call this:

window.isTablet

answered Aug 17 '15 at 21:12

Post Impatica

10,585
5
48
61

score 1 · Answer 6 · answered Mar 02 '12 at 12:19

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.

score 1 · Answer 7 · answered Mar 02 '12 at 12:24

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.

score 0 · Answer 8 · answered Aug 23 '13 at 15:09

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

btw some good extra info: http://mobile.smashingmagazine.com/2012/09/24/server-side-device-detection-history-benefits-how-to/ http://stackoverflow.com/questions/9046866/overhead-of-wurfl-vs-responsive-design-in-php — armyofda12mnkeys, Aug 23 '13 at 15:22

score 0 · Answer 9 · answered Jul 30 '15 at 18:56

0

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.

answered Jul 30 '15 at 18:56

Matt Sgarlata

1,511
14
12

Detect phone vs tablet

9 Answers9

Linked