Skip to content
Aprender Medir Blog Case studies Sobre
Nesta página
  • Como a auditoria da meta tag viewport do Lighthouse falha
  • Como adicionar uma meta tag viewport
  • Recursos

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

May 2, 2019 — Atualizado Aug 20, 2019
Available in: Español, 한국어, 中文, English
Appears in: Auditorias de PWA|Auditorias de SEO
Nesta página
  • Como a auditoria da meta tag viewport do Lighthouse falha
  • Como adicionar uma meta tag viewport
  • Recursos

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 #

  • Source code for Has a <meta name="viewport"> tag with width or initial-scale audit
  • Noções básicas de web design responsivo
  • Usando a meta tag viewport para controlar o layout em navegadores de celular
Last updated: Aug 20, 2019 — Improve article
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Web Fundamentals
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.