What is the perfect way to detect a tablet?

问题

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!

回答1:

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?).

回答2:

Do checkout this link - gives a detailed info on how to identify different devices.

回答3:

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

回答4:

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
}

来源：https://stackoverflow.com/questions/15566168/what-is-the-perfect-way-to-detect-a-tablet

标签

html

css

desktop

tablet