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
content
inclui 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-width
define o viewport com a largura do dispositivo.initial-scale=1
define o nível de zoom inicial quando o usuário visita a página.
Recursos #
- Source code for Has a
<meta name="viewport">
tag withwidth
orinitial-scale
audit - Noções básicas de web design responsivo
- Usando a meta tag viewport para controlar o layout em navegadores de celular