Metatags para dispositivos móveis – elas devem ser usadas?

StackOverflow https://stackoverflow.com/questions/1988499

  •  22-09-2019
  •  | 
  •  

Pergunta

As metatags "Viewport", "MobileOptimized" e "HandheldFriendly" podem ser usadas para fornecer conteúdo HTML formatado adequadamente para dispositivos móveis.Essas tags são coisas boas?Eles parecem bastante específicos da plataforma em muitos casos e, mesmo quando não são específicos da plataforma (janela de visualização), parecem exigir atributos específicos do dispositivo para funcionar corretamente.

Eles deveriam ser usados?Onde e quando é apropriado usá-los?Existem alternativas (sem reconhecimento de agente de usuário)?

Observação:Tenho usado consultas de mídia CSS para obter suporte móvel, mas isso requer algum UAR para otimizar o tamanho da fonte.

Foi útil?

Solução

A resposta simples é: viewport é bom, os outros são...menos bom.

janela de exibição

viewport é um padrão de fato amplamente apoiado - originalmente criado pela Apple para o Safari móvel no iPhone, foi adotado por quase todos os outros navegadores móveis:Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox

Exemplo de caso de uso simples:tornar o site com largura total no celular:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Os outros dois são 'padrões' de fato mais antigos para 'feature phones' - que geralmente são antigos demais para suportar viewport:

PortátilAmigável

Esta tag foi originalmente usada para identificar conteúdo móvel em navegadores AvantGo, mas tornou-se um padrão geral para identificar sites móveis.No entanto, não se sabe qual gama de navegadores suporta esta meta tag:

<meta name="HandheldFriendly" content="true"/>

MobileOtimizado

Esta é uma meta tag proprietária do Windows que também acabou sendo usada como outro meio de identificar conteúdo móvel.A desvantagem dessa tag é que uma largura específica deve ser fornecida.Novamente, não se sabe qual é o suporte para esta tag:

<meta name="MobileOptimized" content="320"/>

Resumo

Usar viewport a não ser que tu precisar para oferecer suporte a feature phones mais antigos que não o suportam; nesse caso, provavelmente use HandheldFriendly e MobileOptimized - mas teste seus dispositivos alvo e descubra.

Eles deveriam ser usados?Onde e quando é apropriado usá-los?Existem alternativas (sem reconhecimento de agente de usuário)?

Eles devem ser usados ​​quando você deseja os efeitos que eles criam - geralmente, informando aos telefones qual zoom padrão usar, controlando o redimensionamento, etc.Esta é uma boa explicação de por que você pode querer usar a janela de visualização, por exemplo: http://davidbcalhoun.com/2010/viewport-metatag - também lista as outras propriedades que você pode definir com a viewport e o que elas fazem.

A única outra maneira de obter esses efeitos, sem usar essas metatags, é com truques divertidos de JS - que serão mais lentos, exigirão carregamento de script, serão difíceis de manter e não serão confiáveis.Navegadores que não suportam viewport provavelmente terá uma interface JS com muitos bugs para visualizar coisas relacionadas;veja os links do modo quirks abaixo.

Referências

Outras dicas

O iPhone usa o Safari como navegador.Eles TEM um página do desenvolvedor que fornece algumas informações sobre quando usar a janela de visualização da meta tag:

Por exemplo, se sua página da web for mais estreita que 980 pixels, você deverá definir a largura da viewport para se encaixar no seu conteúdo da web

É usado assim:

<META name="viewport" content="width = 650" />

<META name="viewport" content="width = device-width" />

<META name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

Outro artigo que pode ser interessante para você é Uma lista à parte:"Coloque seu conteúdo no meu bolso".

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top