En un sitio web, se vuelve importante detectar el dispositivo señalador utilizado por el usuario. Por ejemplo, si el usuario usa un dedo como dispositivo señalador (que tiene menos precisión en la pantalla debido a una mayor área de contacto entre la pantalla y el dedo), entonces deberíamos aumentar el tamaño de varios elementos como botones, enlaces, campos de entrada, etc. que el usuario se sienta cómodo utilizando el sitio web.
Un dispositivo de pantalla táctil se puede detectar fácilmente mediante consultas de medios CSS o JavaScript.
HTML por sí solo no puede detectar dispositivos con pantalla táctil. Junto con HTML, necesitaremos consultas de medios CSS. En las consultas de medios CSS, tenemos una función llamada puntero que se utiliza para detectar la precisión de apuntado del dispositivo señalador utilizado por el usuario. Tiene los siguientes 3 valores.
- puntero: ninguno: se activa cuando el mecanismo de entrada del dispositivo no tiene un dispositivo señalador.
- puntero: grueso: se activa cuando el mecanismo de entrada del dispositivo señalador tiene menos precisión. Por ejemplo, pantallas táctiles.
- puntero: fino: se activa cuando el mecanismo de entrada del dispositivo señalador tiene una alta precisión. Por ejemplo, mouse, trackpad, lápiz óptico, etc.
Código HTML: el siguiente código detecta si el usuario está utilizando un dispositivo de pantalla táctil o no.
HTML
<!-- HTML code to detect a touch
screen device -->
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* By default, setting the
image display to none */
#image-GFG {
display: none;
}
/* In case of touch-screen device,
setting image display to block.
Using @media to detect pointer
accuracy */
@media (pointer:coarse) {
#image-GFG {
display: block;
}
}
</style>
</head>
<body>
<h2>
This image will only be visible on
a touch screen device
</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210513020603/GFG.png"
id="image-GFG">
</body>
</html>
Producción:
- Salida en la pantalla táctil:
Salida desde un teléfono inteligente
- Salida en la pantalla no táctil:
Salida desde un escritorio sin pantalla táctil
Nota: Para probar la salida en un teléfono inteligente, copie el código anterior en un archivo .html y transfiéralo al teléfono inteligente y ábralo usando cualquier navegador como Chrome o Safari.
Publicación traducida automáticamente
Artículo escrito por durgeshpushpakar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA