10

Estava vendo uma forma de determinar se o acesso do usuário é feito por um Desktop, normalmente tendo um mouse como dispositivo de interação. Ou se o usuário está acessando por um dispositivo Mobile, normalmente sem o mouse para fazer a interação com a tela.

Aí vi que existe a possibilidade de tratar isso com as regras @media (pointer: X) ou @media (any-pointer: X) onde em pointer: X você define se existe ou não um mouse.

X pode ser:

  • none: Nenhum dispositivo apontador está disponível.
  • coarse: Pelo menos um mecanismo de entrada inclui um dispositivo apontador de precisão limitada.
  • fine: Pelo menos um mecanismo de entrada inclui um dispositivo apontador preciso.

Dúvidas

A dúvida é que tanto para pointer quanto any-pointer os valores são iguais e representam a mesma coisa, então qual é a diferença entre um e outro?

Existe alguma forma de reconhecer, por CSS, se o acesso está sendo por um dispositivo mobile (que não tenha um mouse como dispositivo de entrada) e aplicar uma folha de estilo específica?

1
  • 1
    O pointerleva em consideração o mecanismo de entrada principal. o any-pointer não. Vacê pode ler sobre eles nos links abaixo: pointer any-pointer Acredito que seja isso, espero ter ajudado. Commented 17/12/2018 às 13:37

1 Resposta 1

1
+50

A diferença entre um e outro é que o pointer irá testar apenas o dispositivo apontador primário (primary pointing device), enquanto o any-pointer irá testar qualquer um que tiver disponível e entrar na media query apropriada (fine ou coarse).

No caso do valor none, tanto faz usar pointer ou any-pointer, já que ambos irão assumir none se não houver um dispositivo apontador.

Para exemplificar, vamos imaginar algumas situações:

O termo coarse quer dizer no sentido de ruim, de qualidade inferior. Neste caso, seria de baixa precisão.

Apontador principal: touch

  • pointer: coarse
  • any-pointer: coarse

Apontador principal: touch
Apontador secundário: mouse

  • pointer: coarse
  • any-pointer: fine (por causa do mouse)

Apontador principal: mouse
Apontador secundário: touch

  • pointer: fine
  • any-pointer: fine

Apontador principal: touchpad

  • pointer: fine
  • any-pointer: fine

Apontador principal: mouse
Apontador secundário: touchpad

  • pointer: fine
  • any-pointer: fine

Apontador principal: touchpad
Apontador secundário: mouse

  • pointer: fine
  • any-pointer: fine

Veja que tanto o mouse quanto o touchpad são considerados dispositivos apontadores de alta precisão. Já o touch é considerado coarse (de baixa precisão). Outros dispositivos como trackball e aqueles botões no meio do teclado em notebooks antigos que movem o cursor eu não sei dizer se são fine ou coarse porque não os tenho para testar, mas suponho que ambos sejam fine também por moverem o ponteiro na tela, como faz o mouse e o touchpad. Não creio que o CSS irá saber distinguir a diferença a nível de hardware.

Resumindo, é mais vantagem usar any-pointer porque ele irá buscar o melhor dispositivo apontador, idependemente se ele é o principal ou não. Mas hoje em dia, esse recurso serve apenas para verificar se o dispositivo usado é touch (e alterar propriedades de elementos para facilitar o uso) ou utiliza um cursor na tela.

Em resumo, geralmente um dispositivo móvel irá entrar em coarse, enquanto que um desktop irá entrar em fine (se houver um mouse instalado. Caso contrário irá entrar em none).

6
  • Valeu Sam. E sobre determinar estilos CSS só para o dispositivo mobile com base no tipo de dispositivo de entrada se eh fine, none, etc. Sabe me dizer se eh possível?
    – hugocsl
    Commented 19/03/2019 às 9:24
  • 1
    No mobile sempre será coarse por causa do touch. A não ser que o cara use algum tipo de app que coloque um ponteiro na tela. Mas tb não sei se mesmo com o ponteiro na tela irá cair no fine. Tem um navegador mobile que emula um mouse. Vou testar com ele e te digo.
    – Sam
    Commented 19/03/2019 às 16:03
  • 1
    Era isso mesmo. No Puffin Web browser mobile cai no fine porque ele vem com um emulador de mouse nativo. Já no Chome mobile cai no coarse.
    – Sam
    Commented 19/03/2019 às 16:15
  • Então com essa técnica não da para definir se o acesso é mobile ou desktop, pois os dois são fine ou coarse?
    – hugocsl
    Commented 19/03/2019 às 17:02
  • 1
    Geralmente mobile é coarse (touch) e desktop fine (mouse). Só que se o cara acessar pelo Puffin, vai cair no fine porque ele tem um simulador de mouse embutido.
    – Sam
    Commented 19/03/2019 às 19:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .