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

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

Answer 2

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.

Answer 3

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