Modernizr Reporting Laptop as Touch Device in Chrome and Ff

Modernizr reporting laptop as touch device in Chrome and FF

Unfortunately Modernizr tests for support of Touch-events in the browser, so it's not a proper test for a touch device. Last builds of Chrome and Firefox are supporting this feature.

You can check the issue here:
https://github.com/Modernizr/Modernizr/issues/548

I'm searching for a good solution on this matter too, but the only thing I've found is this, though I haven't tested it out yet: https://stackoverflow.com/a/4819886/1262357

If you have good results please let me know!

can't hide elements on mobile using modernizr

According to the CSS features, HTML5 features, and misc. features that Modernizr detects, there is no mobile feature. I guess that would have to rely on a UserAgent string, which is not a smart idea. The whole point of Modernizr is to detect certain feature sets, which you can use to determine whether or not a feature of yours would work (for example, oh this browser doesn't have inline-svg so don't display this SVG; instead of, oh we think this is IE8 so let's not show this SVG).

I've come across multiple scenarios where my modals (pop ups) don't play nicely on small mobile / touch devices. In that case, I've always done something like this:

<a href="/register">Register</a>

<script>
    $('a').click(function(e) {
        if(!Modernizr.touch) {
            e.preventDefault();
            // show register modal
        }

        // fallback to page
    });
</script>

Modernizr.videoautoplay object shows true, Modernizr.videoautoplay returning undefined

I'm going to answer my own question in case anyone else runs into this problem. I found the solution on this SO post: How do I detect if the HTML5 autoplay attribute is supported?.

Since this is an "async" test you can't access the property using the syntax

Modernizr.videoautoplay

You have to use the .on() function, as shown in the above SO post:

Modernizr.on('videoautoplay', function(result){
  if(result) {
    alert('video autoplay is supported');
  }  else {
    alert('video autplay is NOT supported');
  }
});

What's the best way to detect a 'touch screen' device using JavaScript?

Update: Please read blmstr's answer below before pulling a whole feature detection library into your project. Detecting actual touch support is more complex, and Modernizr only covers a basic use case.

Modernizr is a great, lightweight way to do all kinds of feature detection on any site.

It simply adds classes to the html element for each feature.

You can then target those features easily in CSS and JS. For example:

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

And Javascript (jQuery example):

$('html.touch #popup').hide();

How can i backtrace my modernizr to find what all the custom download includes?

Most of the time the minified builds include the custom url that created the build (eg, something like http://modernizr.com/download/#-csstransforms-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load). Each one of the words between the -'s is a separate test.

If that was stripped, you could just run each script in the browser, then compare the Modernizr objects that are created.

---

Related Topics