CODEWITHSUNDEEP
htmlcssdesktoptablet
Rudolf Bos
Rudolf Bos

Reputation: 111

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!

Upvotes: 11

Views: 19512

Answers (4)

Davide Arcinotti
Davide Arcinotti

Reputation: 115

2024: with new tablets, ie Galaxy S9 tab, all these methods are not working anymore. Max touch will fail under edge. User agent does not display android anymore. Device object is often empty. U will not even be able to detect if it is a mobile device or not. Looking for solutions for our big project but it is close to impossible, for vendors decisions.

Upvotes: 0

Karol Websky
Karol Websky

Reputation: 116

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
}

Upvotes: 2

starbeamrainbowlabs
starbeamrainbowlabs

Reputation: 6136

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

Upvotes: 4

Richard de Wit
Richard de Wit

Reputation: 7470

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

Upvotes: 4

Related Questions