Categorías: Tutoriales

Detectar dispositivos táctiles en Javascript

Últimamente, los programadores web tienen que desarrollar aplicaciones que sirvan tanto para un PC como para un dispositivo táctil.

En Javascript, éste es el código que yo utilizo cuando quiero hacer una web multiplataforma:

if ("ontouchstart" in document.documentElement)
{
// Es un dispositivo táctil.
}
else
{
// No es un dispositivo táctil.
}

Esto es muy útil ya que no se usarán los mismos eventos de Javascript en un PC que en un dispositivo táctil.

Ejemplo

Para probar el ejemplo, copia el código fuente y pégalo en un editor de textos. Guárdalo como ejemplo.html y ejecútalo desde un navegador.

<!doctype html>
<html>
<head>
<title>Detectar dispositivos táctiles en Javascript</title>
<meta charset="utf-8" />
<style type="text/css">
#canvas{background-color: #000;}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", iniciar, false);
function iniciar()
{
var canvas = document.getElementById("canvas");
if ("ontouchstart" in document.documentElement)
{
canvas.addEventListener("touchstart", detectar, false);
}
else
{
canvas.addEventListener("mousedown", detectar, false);
}
}
function detectar()
{
if ("ontouchstart" in document.documentElement)
{
alert("Es un dispositivo táctil.");
}
else
{
alert("No es un dispositivo táctil.");
}
}
</script>
</head>
<body>
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

Manuel Ignacio López Quintero

Doctor en Ingeniería Informática especializado en Sistemas Inteligentes y Visión Artificial. Profesor y coadministrador de Linux Hispano. Para más información o para contactar con él visita su página oficial: Manuel Ignacio López Quintero.