A veces, puede estar buscando algunas funciones para incluir en su aplicación web que solo deberían estar disponibles para dispositivos con pantalla táctil. Es posible que necesite esta detección al introducir controles más nuevos e inteligentes para usuarios de pantalla táctil en la aplicación del juego o en una aplicación de GPS y navegación. Si bien hay muchas bibliotecas de JavaScript, como Modernizer , jQuery, etc., que están diseñadas explícitamente para realizar este tipo de tareas.
Se observa que el dispositivo admite eventos táctiles no significa necesariamente que sea exclusivamente un dispositivo de pantalla táctil. Muchos de los ultrabooks de gama alta son táctiles. Entonces, para una mejor experiencia de usuario, debe considerar algunos atributos más además de buscar un dispositivo de pantalla táctil.
Para realizar esta verificación, apuntando a todos los navegadores posibles, usaremos las siguientes tres propiedades;
- ontouchstart: un controlador de eventos que maneja el evento activado después de tocar un elemento DOM.
- maxTouchPoints: una propiedad de solo lectura de una interfaz Navigator devuelve la cantidad máxima de puntos de contacto táctiles simultáneos que admite el dispositivo.
- msMaxTouchPoints: Igual que el anterior, solo con el prefijo del proveedor «ms» para los navegadores de destino IE 10 y anteriores.
Sintaxis:
javascript
function is_touch_enabled() {
return ( 'ontouchstart' in window ) ||
( navigator.maxTouchPoints > 0 ) ||
( navigator.msMaxTouchPoints > 0 );
}
Ejemplo: este ejemplo muestra una imagen si detecta un dispositivo de pantalla táctil; de lo contrario, la imagen no se mostrará.
html
<!DOCTYPE html>
<html>
<head>
<title>
Detect touch screen device
using JavaScript
</title>
</head>
<body>
<p>
Detect touch screen device
using JavaScript
</p>
<p>
If touch screen detected then display
an image otherwise image will not
display
</p>
<div id="GFG"></div>
<script type="text/javascript">
function is_touch_enabled() {
return ( 'ontouchstart' in window ) ||
( navigator.maxTouchPoints > 0 ) ||
( navigator.msMaxTouchPoints > 0 );
}
var src =
"https://write.geeksforgeeks.org/wp-content/uploads/gfg-39.png";
if( is_touch_enabled() ) {
var img = "<img src=" + src + " height='100'/>";;
}
else {
var img = "";
}
document.getElementById('GFG').innerHTML = img;
</script>
</body>
</html>
Producción:
- Salida en pantalla no táctil:
- Salida en pantalla táctil:
Ejemplo 2: en este ejemplo, un <div> se puede arrastrar solo si el dispositivo es táctil.
html
<!DOCTYPE html>
<html>
<head>
<title>
Detect touch screen device
using JavaScript
</title>
<link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/
jquery.ui.touch-punch.min.js">
</script>
<style>
#draggable {
width: 150px;
height: 50px;
text-align: center;
}
</style>
<script>
function is_touch_enabled() {
return ( 'ontouchstart' in window ) ||
( navigator.maxTouchPoints > 0 ) ||
( navigator.msMaxTouchPoints > 0 );
}
if( is_touch_enabled() ) {
$(function() {
$( "#draggable" ).draggable();
});
}
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Draggable Elements!</p>
</div>
</body>
</html>
Producción:
- Salida en pantalla no táctil:
- Salida en pantalla táctil:
