Como detectar dispositivo de touch screen com JavaScript

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

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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!