Determinando os recursos de entrada do dispositivo para interfaces somente de toque

detectar se um usuário está usando um dispositivo somente de toque é crucial para adaptar a interface do usuário de aplicativos da Web, conforme. As respostas atuais a esta pergunta fornecem métodos para realizar isso usando recursos de eventos de toque. No entanto, essa abordagem é insuficiente, pois não pode distinguir entre dispositivos que possuem recursos de entrada de mouse e toque. Esses recursos permitem que os desenvolvedores consultem a presença e a precisão dos dispositivos apontadores, como ratos ou telas de toque. As seguintes opções estão disponíveis:

@Media (Pointer: Grosse) {...} // Dispositivo de apontamento de precisão limitada @media (ponteiro: fino) {...} // dispositivo de apontamento preciso @media (ponteiro: nenhum) {...} // nenhum dispositivo apontador

@media (pointer: coarse) { ... } // Limited accuracy pointing device
@media (pointer: fine) { ... } // Accurate pointing device
@media (pointer: none) { ... } // No pointing device

@mídia (hover: hover) {...} // pode passar o mouse @media (hover: nenhum) {...} // não pode percorrer

@media (pointer: coarse) { ... } // Limited accuracy pointing device
@media (pointer: fine) { ... } // Accurate pointing device
@media (pointer: none) { ... } // No pointing device

@media (qualquer hover: hover) {...} // qualquer dispositivo de entrada pode passar o mouse @media (qualquer curva: nenhum) {...} // Nenhum dispositivo de entrada pode passar o mouse

@media (any-hover: hover) { ... } // Any input device can hover
@media (any-hover: none) { ... } // No input device can hover

? // dispositivo de toque-toque }

 Além disso, é importante considerar que a falta de entrada do mouse também pode indicar a presença de um dispositivo somente de teclado. Os recursos de interação da mídia CSS4 podem detectar efetivamente os dois tipos de limitações de entrada.