What is the perfect way to detect a tablet?

Question

I am looking for the perfect way to detect tablets. With media queries you can set min- and max-widths for specific CSS. But there are tablets that have higher resolutions than soms desktop monitors. So that will give a conflict.

With Javascript (Modernizr, Detectivizr) tablets are recognized and sets this in the HTML with a class 'tablet' on the HTML tag. But... Not all users have Javascript enabled.

So what you want is (in my opinion) use CSS to detect tablets. Does anyone know the perfect solution for this?

Thanx in advance!

Answer 1

You can check against the navigator.userAgent, but its JavaScript, like this:

var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);

---

EDIT

I found this:

@media only screen and (max-width: 760px) {
    /* Styles for phones */
}

This seems to detect if the width of the browser is the size of a smartphone.

See the answers in this question for more info

Answer 2

You can obtain a reasonable degree of accuracy by using CSS media queries:

@media only screen 
and (max-device-height : 768px) 
and (max-device-width : 1024px)
{
    /* CSS Styles go here..... */
}

The above should detect when the device screen size is less than 1024x768 (a common screen size for desktops).

As you have stated above it is not perfect if you just use CSS because some tablets have a screen size larger than 1024x768.

The only way that I know of to increase the accuracy is to use javascript to sniff the userAgent string. See the question that GeenHenk linked to (What is the best way to detect a mobile device in jQuery?).

Answer 3

What about using mobile-detect.js? I've just utilized it for my project - it's got nice .tablet() method.

UPDATE (for maxshuty)

I'm using it in the following way:

var md = new MobileDetect(window.navigator.userAgent);
if( md.tablet() || !md.phone() ) {
    // your code here
}