Mobile Feature Detection

Introduction

In case you cannot guarantee beforehand that all devices on which your project will be run support the HTML5 or CSS3 functionality needed for the mobile feature snippets below, you can use the Modernizr JavaScript (modernizr.com) library to test whether or not your device supports a certain feature. For example, the following code snippet uses the Modernizr library to test if the device supports the geolocation API:

Detecting geolocation support using Modernizr

if (Modernizr.geolocation) {
    // geolocation supported; add code that makes use of geolocation
} else {
    // geolocation not supported; create some type of fallback
}

Alternatively, if your scripts are large you may consider creating separate JavaScript files for versions of your code that do and that do not make use of the feature and load the right one using Modernizr.load. This works as follows:

Alternative way of detecting geolocation support using Modernizr

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js', // (code that makes use of geolocation API)
  nope: 'geo-polyfill.js' // (code that doesn’t use geolocation API)
});

NB: On mobile devices in particular, minimizing file sizes should always be a priority. Therefore, Modernizr allows you to make custom builds, including only the tests that you actually use in your site. For example, to create a custom build of Modernizr that only includes the test for support of the geolocation API, go to http://modernizr.com/download/, select the features that you need and download a custom, minified build. In order to use the Modernizr library, make sure to add a link to the library in the head of the template.

Add Modernizr script to the head of the template

<script src="modernizr.js"></script>

References: See

http://modernizr.com/docs/ for more information on Modernizr.js. For a quick overview of the features that Modernizr detects, see http://modernizr.com/download/. In case you need to create a fallback option (also known as a polyfill) for devices that don’t support a certain CSS3 or HTML5 feature, you may want to have a look at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills