Não tem uma <meta name =" viewport "> tag com largura ou escala inicial
Published on • Updated on
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.
In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).
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
Updated on • Improve article