Não tem uma <meta name =" viewport "> tag com largura ou escala inicial
Muitos mecanismos de pesquisa classificam as páginas com base no grau de compatibilidade com dispositivos móveis. Sem uma viewport meta tag , os dispositivos móveis renderizam as páginas em larguras de tela típicas de desktops e, em seguida, reduzem as páginas, tornando-as difíceis de ler.
Definir a viewport meta tag 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 da meta tag viewport do Lighthouse falha #
O Lighthouse sinaliza as páginas sem uma meta tag da janela de visualização:
Uma página falha na auditoria, a menos que todas essas condições sejam atendidas:
<head>do documento contém uma tag<meta name="viewport">- A meta tag do viewport contém um atributo
content - O valor do atributo
contentinclui o textowidth=.
O Lighthouse não verifica se width é igual a device-width. Também não verifica se há um par de valores-chave de initial-scale. No entanto, você ainda precisa incluir ambos para que sua página seja processada corretamente em dispositivos móveis.
Como adicionar uma meta tag viewport #
Adicione um viewport <meta> com os pares de valores-chave apropriados ao <head> de sua página:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…Aqui está o que cada par de valores-chave faz:
width=device-widthdefine o viewport com a largura do dispositivo.initial-scale=1define o nível de zoom inicial quando o usuário visita a página.
Recursos #
- Source code for Has a
<meta name="viewport">tag withwidthorinitial-scaleaudit - Noções básicas de web design responsivo
- Usando a meta tag viewport para controlar o layout em navegadores de celular