Distinguish between smartphone and tablet

Question

I've got quite an easy question, but I cannot find an answer on the net. All I want to do is to detect, whether the current user agent is

1. a "non-mobile"
2. a smartphone
3. a tablet

It's easy to detect a mobile vs. a non-mobile device, but I did not find any solution to distinguish between 2 and 3.

Can anybody help me?

Cheers

Chris

Answer 1

I have described a way to do this in my answer to stackoverflow.com/questions/9297370/. The strategy is:

1. Use css media queries to detect phones using a max-device-width of 600px.

2. Set an imperceptible change in style on this basis, e.g. body color from rgb(0, 0, 0) to rgb(0, 0, 1)

3. Use an OnLoad() to call a Javascript function that checks the body color.

(4. Override the style change if necessary in your style sheet for classes, ids or tags etc.)

This depends on 600px being the correct device-width discriminator. At present it works with all iPhones (up to 6plus) v. all iPads (using Apple's Xcode simulator). Can't guarantee that there aren't bigger phones, but if they are they would probably tolerate being treated as tablets.