CODEWITHSUNDEEP
cssmobileresponsive-designmedia-queriestablet
Eric
Eric

Reputation: 2034

How can I distinguish a tablet from an older laptop or desktop with media queries?

There're apparently a lot of common breakpoints with media query screen sizes to detect/develop for mobile devices and tablets, as well as ways of detecting retina displays using pixel ratio media queries, but how can I go about telling the difference between an older ipad or another tablet that doesn't have retina display and a laptop or smaller desktop screen that has roughly the same resolution?

The interface I'm working with needs to change depending on whether the user has a mouse or a touchscreen, and things like an older ipad at horizontal orientation can easily be confused for an older laptop or desktop display.

So what's the best way of distinguishing between mobile tablets and older laptops or desktops that have similar resolutions?

Upvotes: 0

Views: 604

Answers (2)

Jimbo Jones
Jimbo Jones

Reputation: 563

Could you use the modernizr library (http://modernizr.com/ ) to detect if its a touch device and work from there?

Modernizr allows you to have different CSS depending on whether touch inputs:

html.touch a {
   Padding:10px;
}

html.no-touch a {
   Padding:4px;
}

Upvotes: 1

JerryHuang.me
JerryHuang.me

Reputation: 1790

WURFL or DeviceAtlas

If you are strictly targeting iOS tablets, then there are specific media queries for them, in both orientations.

Just out of curiosity, what type of UI would require a different mouse or touchscreen view? The only reason I can think of is a gaming solution?

Upvotes: 1

Related Questions