Neste artigo você vai aprender a como detectar dispositivo de touch screen com JavaScript, utilizando recursos da linguagem
Fala programador(a), beleza? Bora aprender mais sobre touch screen e JavaScript!
Para resolver o nosso problema podemos criar uma função e invocá-la quando for necessário
Esta função vai checar algumas coisas:
- Um evento touchstart;
- Uma propriedade do navegador chamada maxTouchPoints;
- E outra msMaxTouchPoints;
Este são os recursos mais fiéis para detectar um dispositivo que usa touch
O código de exemplo é este:
function detectTouchDevice() {
return (('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0));
}
detectTouchDevice()
Receberemos um booleano que retorna true para dispositivos touch e false para os que não são
É importante lembrar que isso não é totalmente certeiro, pois não há um método concreto para detectar estes dispositivos nos dias de hoje (2022)
Mas costuma funcionar com a maioria deles
Um bom artigo que fala sobre isso é este aqui, sugiro dar uma lida caso o código acima não seja suficiente para resolver o seu problema
Conclusão
Neste artigo você aprendeu a como detectar dispositivo de touch screen com JavaScript
Utilizamos algumas validações que o objeto navigator nos oferece
Porém o método não é infalível, se o código acima não foi o suficiente pode ser que o dispositivo que você está tentando detectar não seja detectável 🙂
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!