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.

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

Solution 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)')) { ...}

Solution 3

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

Comments

[Jacques]

Retina displays make this tricky though because it theoretically has similar resolutions as some desktops

[dsdsdsdsd]

yeah the real issue is no longer screen resolution ... but rather real world dimension that matters ... is the device 4 inches or 19 inches ...

[Carlos Martinez T]

I like that. There should be a media query for centimeters. 1 cm is approximately the area of a fingertip

[mica]

[DetectMobileBrowsers][1] usage with [jQuery][2] if($.browser.mobile){// your code} --- With modernizr if ( Modernizr.touch ) { // your code} modernizr touch documentation

[melat0nin]

I think he means browsers running on desktop machines are touch-enabled, as opposed to the desktop hardware itself.

[Carlos Martinez T]

No, I meant the hardware itself. I live in London. Almost every laptop has now touch screens. The same for most All in one PCs.

[Mark]

However, it labels Windows 8 a 'touch' too. So if you are trying to hide animations or limit bandwidth its sends a false positive in this situation.

[william]

Also some issues on firefox where Modernizr.touch returns true

[doublejosh]

Whether or not desktop touch is "normal" it's still a thing, so touch != mobile. You should use both touch and size together.

[doublejosh]

UA Parser is only 12K vs 37K for mobile-detect.

[mizuki]

Use ems instead of pixels! Until there is such a thing as media queries for centimeters/inches...

[TeNNoX]

Modernizr does not tell you anything about the device... only the browser. There are devices with touchscreens running browsers which don't support Touch Events; there are devices without touchscreens running browsers which do support Touch Events. -> github.com/Modernizr/Modernizr/issues/651#issuecomment-13939‌​129

[Ales Maticic]

@Carlos Martinez so my MacBook Pro is not touch enabled and most people use Mac's here so I don't know where have you seen that most are touch enabled. BTW I also live in London

[Chuck Le Butt]

Five years later and this statement still isn't close to being true

[Berkant İpek]

restivejs.com is dead.

[Kamil Bęben]

On many devices (mobile) hardware pixel != software pixel. That's why even though a phone can have hardware display resolution of 1080 x 2340 px, but it will be treated as 393 x 665 px by mobile browser, which would result in bigger elements and more detailed fonts.

[Anthony]

How has nobody combined these into a single solution?