Sem uma metatag viewport, os dispositivos móveis renderizam páginas com larguras de tela típicas de computadores e depois reduzem as páginas, dificultando a leitura.
Ao definir a metatag viewport, você controla a largura e o dimensionamento da janela de visualização para que ela seja dimensionada corretamente em todos os dispositivos.
Como a auditoria da metatag da 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 de viewport contém um atributo content.
- O valor do atributo content inclui o texto width=.
Como adicionar uma metatag de janela de visualização
Adicione uma tag de viewport <meta> com os pares de chave-valor adequados ao <head>
da sua 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 um recurso de toque duplo para ampliar, geralmente usado em sites para computador que não são otimizados para dispositivos móveis. Isso adiciona um atraso de 300 milissegundos a qualquer interação de toque enquanto o navegador aguarda para verificar se um segundo toque "duplo" acontece. Portanto, a auditoria também falha quando a escala inicial é definida como menos de 1.