What is the perfect way to detect a tablet?

css, desktop, html, tablet

Solution

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

Problem

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!

Original source

Related problems