Não tem uma <meta name =" viewport "> tag com largura ou escala inicial

Published on Updated on

Translated to: English, Español, 한국어, 中文

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:

A auditoria lighthouse mostra que a página está sem 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 texto width=.

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-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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.