Sem uma metatag de viewport, os dispositivos móveis renderizam páginas nas larguras de tela típicas de computadores e depois redimensionam as páginas, tornando-as difíceis de ler.
A definição da metatag viewport permite controlar a largura e a escala da janela de visualização para que ela seja dimensionada corretamente em todos os dispositivos.
Como a auditoria de meta tag de janela de visualização do Lighthouse falha
O Lighthouse sinaliza páginas sem uma metatag viewport:
Uma página falha na auditoria, a menos que todas estas condições sejam atendidas:
- O <head> do documento contém uma tag <meta name="viewport">.
- A metatag viewport contém um atributo content.
- O valor do atributo content inclui o texto width=.
Como adicionar uma metatag de viewport
Adicione uma tag <meta> do viewport com os pares de chave-valor apropriados ao <head>
da página:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Confira o que cada par de chave-valor faz:
- width=device-width define a largura da janela de visualização como a largura do dispositivo.
- initial-scale=1 define o nível de zoom inicial quando o usuário visita a página.
Escala inicial menor que 1
Quando o initial-scale é definido como menos de 1, isso pode fazer com que os navegadores ativem o recurso de toque duplo para zoom, normalmente usado em sites para computador que não são otimizados para dispositivos móveis. Isso adiciona um atraso de 300 milissegundos a todas as interações de toque enquanto o navegador aguarda para verificar se um segundo toque "duplo" ocorre. Portanto, a auditoria também falha quando a escala inicial é definida como menor que 1.