Por muitos anos, os navegadores para dispositivos móveis aplicaram um atraso de 300 a 350 ms entre touchend e click enquanto aguardavam para saber se seria um toque duplo ou não, já que esse gesto era usado para dar zoom no texto.
Desde a primeira versão do Chrome para Android, esse atraso foi removido se o zoom de pinça também estava desativado. No entanto, o zoom por pinça é um recurso de acessibilidade importante. A partir do Chrome 32 (em 2014), esse atraso foi removido para sites otimizados para dispositivos móveis, sem remover o zoom de pinça. O Firefox e o IE/Edge fizeram o mesmo logo depois, e em março de 2016 uma correção semelhante foi lançada no iOS 9.3.
A diferença de performance é enorme.
Ter uma interface que responde instantaneamente significa que o usuário pode pressionar rapidamente cada botão com confiança, em vez de pausar e esperar por uma resposta. Saiba mais sobre o impacto dos tempos de reação humana e o desempenho da Web na nossa introdução ao RAIL.
Para remover o atraso de 300 a 350 ms no toque, basta fazer o seguinte no <head> da sua página:
<meta name="viewport" content="width=device-width">
Isso define a largura da janela de visualização como a mesma do dispositivo e geralmente é uma prática recomendada para sites otimizados para dispositivos móveis. Com essa tag, os navegadores presumem que você deixou o texto legível em dispositivos móveis, e o recurso de tocar duas vezes para ampliar é substituído por cliques mais rápidos.
Se, por algum motivo, você não puder fazer essa mudança, use touch-action: manipulation para conseguir o mesmo efeito em toda a página ou em elementos específicos:
html {
touch-action: manipulation;
}
Essa técnica não é compatível com o Safari, então a tag de viewport é a melhor opção.
A perda do recurso de tocar duas vezes para aumentar o zoom é um problema de acessibilidade?
Não. O zoom por pinça continua funcionando, e os recursos do SO atendem aos usuários que acham esse gesto difícil. No Android, os gestos de ampliação cuidam disso. Ferramentas como essa funcionam até mesmo fora do navegador.
E os navegadores mais antigos?
O FastClick da FT Labs usa eventos de toque para acionar cliques mais rapidamente e remove o gesto de tocar duas vezes. Ele analisa a quantidade de movimento do dedo entre touchstart e touchend para diferenciar rolagens e toques.
Adicionar um listener touchstart a tudo tem um impacto na performance, porque interações de nível inferior, como a rolagem, são atrasadas ao chamar o listener para saber se ele event.preventDefault(). Felizmente, o FastClick evita a configuração de listeners nos casos em que o navegador já remove o atraso de 300 ms. Assim, você aproveita o melhor dos dois mundos.