Javascript: Rilevare il supporto touch del browser

Il metodo migliore per sapere se l'utente che sta navigando il nostro sito ha un dispositivo touch o meno è usare l'ottima libreria Modernizr (http://modernizr.com), che permette di rilevare parecchie feature di nuova generazione supportate dal browser.

Se ci interessa solo la rilevazione del touch e non vogliamo mettere tutta la libreria (nonostante sia molto piccola e può essere scaricata anche solo con le sezioni che interessano) potete usare il javascript sotto.

Comunque supportate Modernizr!

/* Based on http://modernizr.com */
var internalid = 'detecttouch';
var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
var detected = {};
function injectElementWithStyles(rule, callback) {
  var div = document.createElement('div'),
      body = document.body,
      fakeBody = body ? body : document.createElement('body'),
      style = ['&#173;','<style id="s', internalid, '">', rule, '</style>'].join('');
  div.id = internalid;
  (body ? div : fakeBody).innerHTML += style;
  fakeBody.appendChild(div);
  if ( !body ) {
    fakeBody.style.background = "";
    docElement.appendChild(fakeBody);
  }
  var ret = callback(div, rule);
  !body ? fakeBody.parentNode.removeChild(fakeBody) : div.parentNode.removeChild(div);
  return !!ret;
}
function detect_touch_device() {
  if (typeof detected.touch == 'undefined') {
    if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
      detected.touch = true;
    } else {
      injectElementWithStyles(['@media (',prefixes.join('touch-enabled),('),internalid,')','{#modernizr{top:9px;position:absolute}}'].join(''), function( node ) {
        detected.touch = node.offsetTop === 9;
      });
    }
    return detected.touch;
  }
  return detected.touch;
}