Sem uma metatag da janela de visualização, dispositivos móveis renderizam páginas em larguras típicas de tela de desktop e depois redimensionam a páginas para baixo, dificultando a leitura.
Definir a metatag da janela de visualização permite controlar o a largura e o dimensionamento 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
Páginas de sinalizações do Lighthouse sem uma metatag da janela de visualização:
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> da janela de visualização 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>
…
Veja 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 inferior a 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.