Media Queries: How to target only tablet?

Question

I have been doing some research on media queries and I understand the concept of mobile-first design.

I know, that there are lots of questions regarding media queries but none of them targets my specific question.

Also I understand the concept of structuring your stylesheets with media queries like this:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

However I really need a way for my stylesheets to target only tablets regardless of the browser resolution (width & height). Checking the browser-width is simply not safe enough (and definitely not what I am searching for) in 2015 where some tablets have a bigger resolution than older desktops.

Here is a list of things I have tried so far:

I made a list of "common" tablet-resolutions and simply specified detailed media queries. This approach failed after I found tablets with 1024px width (which is the same as older desktop browsers).
I read a lot about media queries and found out that modern browsers (especially on tablets) sometimes ignore specifications like "@media only screen" and that most values of a media query are deprecated.

1.) Is there a safe way to target tablets regardless of their resolution with media queries?

2.) Is there any way to use JavaScript/JQuery to find out if the Browser is used on a Tablet (touchscreen)?

Maybe there is a certain css property OR JavaScript function that is only "triggered" on tablets (I am out of ideas)? Thank you for your help.

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

You can use this:

@media only screen and (min-device-width: 768px){}

For ref : Media Queries: How to target desktop, tablet and mobile?

edited May 23 '17 at 12:22

Community

1
1

answered Mar 17 '15 at 11:07

Pradeep Pansari

1,287
6
10

Your answer addresses ALL devices that are minimum 768px wide (I've tried it). Does NOT work to address only tablets as OPs question. – swbergmann Mar 17 '15 at 11:19

score 0 · Answer 2 · answered Mar 17 '15 at 11:10

Short answer: no.

I would say, what is a tablet nowadays? Some phones are so big that they seem more like tablets and some tablets are so small that they overlap the bigger phones market...

So I would say, go for feature detection, target the features that you are interested in, and the best way for me, apart from media queries, is Modernizr.

You can take a look at their custom builds page and literally pick the features that you are interested in (touch events? geolocation?), knowing that you got the support of a reliable, well tested library.

Media Queries: How to target only tablet?

2 Answers2