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.
}
{
// 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>
<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>
Suscríbete
Síguenos
Contacta
