Tablet Detection

Question

Okay I got some good advice for Mobile Detection but still having an issue with themed tablets as the icons will be larger for a tablet view then a mobile device. I'm using jQueryMobile as the framework and it does detect the iPad (And I'm sure other tablets are on the way), but how can I detect if it's a tablet or mobile device? would I just go with the screen size?

If that's the case than what's the largest screen size for a mobile device or the smallest screen for a tablet?

is there a better way?

Answer 1

jQuery Mobile adds classes to the body tag which allows you to create a single CSS for all the devices.

See here: http://jquerymobile.com/demos/1.0a3/#docs/api/mediahelpers.html

update

As of beta2 helpers will be deprecated and set for removal. You should take a look at media queries which were used to put these classes in there anyway.

Answer 2

I'd suggest using media queries and targeting a different CSS stylesheet.

Answer 3

Have you considered the benefits of server side detection? OpenDDR offers .NET and Java libraries, licensed under LGPL.

You can have a look at http://www.openddr.org

Answer 4

We are starting to develop using Formfactor detection libraries such as FormfactorJS - note, I created this.

The theory being using the same semantic HTML, you can specialize your CSS and Javascript using for a given class of device (smartphone, tablet, desktop etc) whilst also being cognizant of responsive design to individual device profile using Media Queries.

Answer 5

Have you ever considered a device detection library like wurfl, tera-wurfl or the proprietary deviceAtlas?