10

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!

Rudolf Bos
  • 101
  • 1
  • 1
  • 4
  • 3
    Why are you detecting them exactly ? To know if they're touch based ? Then you should target thouch detection, not "tablet" detection. – Denys Séguret Mar 22 '13 at 08:52
  • 1
    You can try to set `max-device-width` instead of `max-width` in media queries. Not sure if it helps. – nd_macias Mar 22 '13 at 08:59
  • @nd_macias: max-device-width also works for desktop monitor, because that also is a device. Also portrait or landscape recognition doens't solve the problem. – Rudolf Bos Mar 22 '13 at 09:29
  • @dystroy I am looking for a tablet, not for a touch based device. – Rudolf Bos Mar 22 '13 at 09:30
  • @Rudolf Bos Ok, and that is what you're aiming - the width of the device, so it doesn't really matter if it is desktop monitor or any other device. – nd_macias Mar 22 '13 at 09:38

3 Answers3

4

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

Community
  • 1
  • 1
starbeamrainbowlabs
  • 4,842
  • 6
  • 38
  • 68
2

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

Community
  • 1
  • 1
Richard de Wit
  • 5,772
  • 7
  • 42
  • 50
  • Do note that this requires JS too. OP mentions that "Not all users have Javascript enabled". However, there is probably no (reliable) way to get the user agent without using JS. – xbonez Mar 22 '13 at 08:56
  • 2
    Nexus 4 has a screen width of 768px, and Nexus 5 1080px. I don't think we can rely on screen pixels for delivering the proper layout anymore. – devius Dec 14 '13 at 21:47
  • @devius You're right. I guess the only solution is in detecting the User Agent (either by JS or PHP) – Richard de Wit Dec 16 '13 at 15:40
2

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
}
Karol Websky
  • 106
  • 6