Detectando Suporte a Mouse e Toque em Navegadores: Funções da API
Resumo Rápido
Para verificar o suporte de dispositivos com interfaces baseadas estritamente em controle por toque, utilize JavaScript e seu método window.matchMedia em conjunto com consultas de mídia em CSS. Aqui está um exemplo do código relevante:
if (window.matchMedia("(pointer: coarse)").matches) {
// Um dispositivo com interface de toque foi detectado.
} else {
// Um mouse também pode estar em uso.
}Usando esse trecho de código, você pode facilmente identificar dispositivos equipados com telas sensíveis ao toque que respondem a pontos de toque de pelo menos 1 mm — isso é típico para telas sensíveis ao toque.
Analisando Propriedades do Dispositivo
Recursos de Mídia no CSS4
A função pointer do padrão CSS4 permite caracterizar a presença e o nível de sensibilidade de dispositivos de apontamento. A consulta de mídia (pointer: none) indica a ausência de um dispositivo tipo mouse. Sempre considere o suporte do navegador para esses recursos antes de lançar um produto.
Dispositivos Flexíveis: Toque e Mouse
Alguns dispositivos estão equipados tanto com telas sensíveis ao toque quanto com mouses. Monitorar eventos mousemove permitirá que você acompanhe os movimentos do mouse. Da mesma forma, para rastrear ações de toque, utilize touchstart e touchmove.
Primeira Interação
Apenas a presença de eventos de toque pode ser enganosa, já que muitos laptops vêm com telas sensíveis ao toque e trackpads. É importante focar na primeira interação do usuário com o aplicativo e distinguir entre o potencial de controle por toque e o mouse para evitar situações imprevistas.
Usando JavaScript para Identificar Suporte
Consultas de Mídia em JavaScript
Em JavaScript, você também pode determinar o suporte para controle por toque usando window.matchMedia:
const hasMouse = window.matchMedia("(pointer: fine)").matches;
const hasTouch = window.matchMedia("(pointer: coarse)").matches;Distinguindo Entre Mouse e Toque
Implementar funções hasTouch() e hasMouse() simplificará a compreensão e reutilização do código. Concentre-se em identificar as capacidades do dispositivo, em vez do navegador.
Monitorando Mudanças
Escrever funções como listenHasTouchChanges(callback) e listenHasMouseChanges(callback) permite que você monitore mudanças e torne a interface mais adaptativa.
Visualização
Menos mouse, mais controle por toque:
Mundo dos Navegadores:
| Meio de Transição | Disponibilidade |
| -------------------- | -------------- |
| Navio (mouse) | Não constante |
| Submarino (toque) | Sempre |Sem mouse, apenas o controle por toque determinará o futuro caminho.
Sem mouse: mudando para toque.Estrategias e Desafios
Verificando a Compatibilidade do Navegador
É essencial revisar a documentação do W3C. Garanta a compatibilidade entre navegadores usando polyfills.
Projetando para Dispositivos Sensíveis ao Toque
Ao trabalhar no universo de dispositivos sensíveis ao toque, preste atenção nos tamanhos dos elementos interativos e gestos, monitore o desempenho e evite mudanças desnecessárias no layout.
Modernizr - Seu Assistente Confiável
Utilize Modernizr para simplificar a detecção das capacidades do dispositivo. Lembre-se que a presença de eventos de toque não significa necessariamente que o controle por toque seja a única opção.
Recursos Úteis
- Eventos de Ponteiro - Web API | MDN — Um guia sobre eventos de ponteiro.
- Especificação de Eventos de Ponteiro — Documentação W3C sobre eventos de ponteiro.
- Resultados de Teste de Eventos de Toque/Ponteiro | Testes e Demonstrações por Patrick H. Lauke — Cenários de teste e constatações.
- GitHub - Modernizr/Modernizr — Uma biblioteca para detectar funcionalidades HTML5/CSS3.
- Não Julgue Dispositivos de Toque pelo Seu Tamanho | CSS-Tricks — Dicas de desenvolvimento para dispositivos de toque.
- css - Como Trocar de :hover para Toque/Clique em Dispositivos Móveis - Stack Overflow — Uma comparação de como lidar com eventos de toque versus cliques.
- Guia Abrangente para Design de Aplicativos Móveis — Smashing Magazine — Melhores práticas para design de aplicativos móveis.