𝗔 𝗠𝗲𝗱𝗶𝗮 𝗤𝘂𝗲𝗿𝘆 𝗱𝗲 𝗖𝗦𝗦 𝗾𝘂𝗲 𝗺𝘂𝗱𝗼𝘂 𝗺𝗶𝗻𝗵𝗮 𝗮𝗯𝗿𝗼𝗱𝗮𝗴𝗲𝗺 𝗱𝗲 𝗱𝗲𝘀𝗶𝗴𝗻
Eu costumava projetar sites verificando o tamanho da tela.
Eu achava que precisava detectar se o usuário estava usando um celular ou um tablet. Tentei verificar se a altura da tela era maior que a largura. Isso apenas verificava a orientação. Não verificava o tipo de dispositivo.
Encontrei uma maneira melhor. Use media queries para verificar como as pessoas interagem com o seu site.
A query (hover) verifica se um dispositivo consegue passar o cursor sobre os elementos.
Use @media (hover: hover) para dispositivos com mouse ou trackpad.
Use @media (hover: none) para dispositivos apenas de toque, como celulares.
Isso ajuda você a corrigir problemas de hover no mobile. Em um celular, as regras de hover costumam falhar ou agir de forma estranha. Você pode escrever código para mostrar botões no mobile, mas escondê-los no desktop até que o usuário passe o mouse.
O Tailwind torna isso fácil com variantes arbitrárias:
Você também pode verificar a precisão do ponteiro com (pointer).
• Mouse: hover e ponteiro preciso • Trackpad: hover e ponteiro preciso • Toque de dedo: sem hover e ponteiro impreciso • Stylus: geralmente hover e ponteiro preciso
Se você quiser verificar todos os dispositivos de entrada em vez de apenas o principal, use estes:
• @media (any-hover: hover) • @media (any-pointer: fine)
Um tablet com um mouse conectado pode reportar hover: none para sua entrada principal. Mas ele reportará any-hover: hover porque um mouse está presente.
Pare de projetar apenas para tamanhos de tela. Comece a projetar para a forma como os usuários tocam ou clicam na sua interface.