Modernizr: how Modernizr detect mobile or handheld device?

[claudchan]

Hi guys,
I am new in Modernizr.
I am working on a responsive website. I had a float menu which is mouseover it expand. I want to write in js if is mobile, do click else mouseover. I would like to use Modernizr to detect but I don't understand how. How does Modernizr detect if it's mobile / device? I found it here http://stackoverflow.com/questions/3514784/best-way-to-detect-handheld-device-in-jquery but I still don't know how it works. Can anyone show me a sample of codes?

Many thanks!

[thasmo]

Not sure, but in your use-case one possibility could be to check for 'touch' functionality, which modernizr provides imo.

[sindresorhus]

You can detect if a device supports touch events with Modernizr.touch. See docs for more.

Example:

if ( Modernizr.touch ) {
   // click
} else {
   // mouseover
}

[tuupola]

Although Modernizr docs say:

The Modernizr.touch test only indicates if the browser supports touch events, which does not necessarily reflect
a touchscreen device. For example, Palm Pre / WebOS (touch) phones do not support touch events and thus fail
this test. Additionally, Chrome (desktop) used to lie about its support on this, but that has since been rectified.

I think another option would be to test if window.orientation exists.

[stucox]

@tuupola - you're correct. @sindresorhus's advice above is now out of date.

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

Other libraries try to categorise devices as mobile/tablet/desktop/whatever, but personally I wouldn't recommend that approach. We're in a bit of a state of limbo at the moment, but there are some exciting browser features coming soon which will make all of this stuff a breeze.

[codeofsumit]

@stucox well, i'd like to know which device or operating system a device is running as i have heavy css3 animations in my project, and Andriod devices can't handle them smoothly if they have box-shadow or other CSS3 stuff on them. So i'd like to disable all blur/shadows only for andriod devices or if necessary, for all tablets (as they most of the time have lower specs than desktops and notebooks).
I wish this was possible with modernizr.

[stucox]

@Sumit8

There are other projects which seek to classify browsers by type: Android, etc – like Conditionizr (although they currently don't detect Android, I'm sure they'd consider adding that). You could easily create your own detect using something like if ('Android' in navigator.userAgent) { … } though.

Modernizr focusses on feature detection: answering "what can this browser do?", rather than "what browser is this?" – because we believe that feature detection is more reliable and future-proof than browser detection.

That said, I think your use case is a valid case for blacklisting based on user agent: you know that (old?) Android browsers aren't performant, so would prefer them not to try to apply complex animations.

A detect for "the ability to _efficiently_ handle CSS3 animations" would be more up Modernizr's street, but that would be quite specific, subjective and probably hard to write reliably, so I doubt it'd ever happen. That doesn't stop you from writing your own though, of course.

[codeofsumit]

@stucox thanks for getting back at me. I totally get the reasoning behind modernizr and it's feature detection.
Sadly i have to include the Animations everywhere - you know - as the client wishes. I said he has to chose between looks (shadow, blur, ect) and animation on Andriod. He chose animation.
I guess it wouldn't harm to use user-agent filtering this time as the project doesn't have to be "future proof" like a website. More like a teaching web-app that is used for 2 years max.

I also thought about your last approach of detecting the CSS3 efficiency of a browser but also came to the conclusion that this is just impossible to do as there are SO MANY factors to include (hardware specs, browser engine, current load of RAM & CPU, other GPU tasks ect ect).