Using Modernizr to test for tablet and mobile - Opinions wanted

Question

I want to use Modernizr to detect whether a user is view a site on a desktop, tablet or mobile device.

My initial first thoughts are obviously to check screen sizes that should be enough for mobile devices and also for larger desktops. For tablet devices where the screen size could also equal that of a small desktop screen (1024 x 768) I would test for touch events as well.

At this time I would like to focus on mobile/tablet devices that, as jQuery mobile puts it are, A-grade. I am not looking to tap in to any specific mobile device features simply detect desktop, tablet or mobile and serve up a tailored UI for each by appending CSS classes depending on the results of the test.

Do you think this is enough to achieve what I want or do you think I should be testing for other capabilities? Many thanks in advance.

Answer 1

Modernizr can check for touch events

For testing whether the device is a tablet or phone or desktop, I would probably lean more toward using User Agents. Take a look at the scripts on DetectMobileBrowsers.com

Modernizr simply tests for whether or not a browser supports certain features. As far as I know, it doesn't appear to test browser_type == mobile and stuff along those lines...

Keep in mind that a lot of modern desktop PCs these days have touch screens, so even detecting touch support does not guarantee that it is a mobile device or tablet.

Answer 2

This is a follow up answer to an old question as I believe the "correct" answer has changed with time.

• Many laptops are touch enabled today
• Newer mobiles have higher resolutions than the bulk of computer monitors out there while still having a significantly smaller physical screen

The best way I have found to work around this is calculate the physical screen size by multiplying the DPI of the screen in combination with the screen size in pixels.

Answer 3

This question is a bit old but I couldn't find a better answer when I googled it.

Most desktops now are touch enabled, so detecting it is irrelevent.

The best way to detect them is by screen size.

With Modernizr you can use if (Modernizr.mq('only all and (max-width: 480px)')) { ...}

Answer 4

You can use the following extension for Modernizr: https://www.npmjs.org/package/mobile-detect

Or (without Modernizr) you could use Restive.JS to add a ".phone" or ".tablet"-class to your body: http://docs.restivejs.com

(Look for "formfactor" down the page.)