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

Answer 1

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.)

Answer 2

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 3

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 4

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.