How to detect mobile and tablet using CSS or JavaScript regardless of brands?

Question

Basically what I'm trying to do is have 3 css stylesheets for desktop, mobile, and tablet. And I don't care if it is ipad or samsung galaxy tab as long as I know it is a tablet, so that I just apply tablet css to it. Same as iphone or Nexus which I don't care either. I just care about the dimension basically. That would be good if JQuery Mobile could do this.

I know there is lots of code for detecting iphone, ipad, and etc, hope my post still makes sense.

Thanks.

After more than 2 years, can you tell if someone here provided you an acceptable answer ? — Milche Patern, Jun 07 '13 at 15:09

score 1 · Answer 1 · answered Sep 16 '11 at 13:00

1

Sounds like using CSS media queries to create a responsive design may be what you need.

answered Sep 16 '11 at 13:00

ajm

18,564
3
30
34

score 0 · Answer 2 · edited May 23 '17 at 12:26

0

You can have a look at https://stackoverflow.com/a/10364620/450399

He uses css to check screensize and sets a HTML element and reference the css in javascript to determine if it's a "mobile/tablet" device.

You can also have a look at Twitter Bootstrap :) It's really magic!

edited May 23 '17 at 12:26

Community

1
1

answered Mar 01 '13 at 07:52

Marc Uberstein

12,143
3
41
68

score 0 · Answer 3 · answered Sep 02 '16 at 09:18

0

I personally use device.js and mobile-detect.js

answered Sep 02 '16 at 09:18

Ananda

760
11
17

score 0 · Answer 4 · edited Apr 02 '13 at 22:14

0

You can check great article on SmashingMagazine about media queries and browser detection

If you dig there some more, you will find more useful info.

edited Apr 02 '13 at 22:14

Ragnarokkr

2,242
2
18
30

answered Sep 16 '11 at 13:02

Siblja

851
2
12
19

How to detect mobile and tablet using CSS or JavaScript regardless of brands?

4 Answers4