No estudo anterior do front-end, o entendimento das meta tags era apenas esta frase.
<meta conjunto de caracteres=UTF-8>
Mas quando você abre qualquer site, há uma coluna de meta tags em sua tag head. Por exemplo, temos o site de artes marciais VeVb, mas não estou familiarizado com ele, então adicionei a meta tag na frente do plano de estudos.
<nome meta = conteúdo da janela de visualização = largura = largura do dispositivo, escala inicial = 1,0, escala máxima = 1,0, escala mínima = 1,0, escalonável pelo usuário = não>
Este é o mais comumente usado. As instruções de largura e altura especificam a largura e a altura lógicas da janela de visualização, respectivamente. Seu valor é um número em pixels ou um símbolo de marcador especial. A diretiva width usa a tag device-width para indicar que a largura da janela de visualização deve ser a largura da tela do dispositivo. Da mesma forma, a diretiva height usa o sinalizador device-height para indicar que a altura da janela de visualização é a altura da tela do dispositivo.
A diretiva escalável pelo usuário especifica se o usuário pode ampliar a janela de visualização, ou seja, a visualização da página da web. Um valor sim permite ao usuário aplicar zoom, um valor não não permite o zoom.
A diretiva de escala inicial é usada para definir o dimensionamento inicial da página da web. O valor de escala inicial padrão varia entre os navegadores do smartphone. Normalmente, o dispositivo renderizará a página da web inteira no navegador; configurá-la para 1.0 exibirá o documento da web sem escala.
As diretivas de escala máxima e escala mínima são usadas para definir o limite do usuário na taxa de zoom da página da Web. Os valores variam de 0,25 a 10,0. Assim como a escala inicial, o valor dessas diretivas é a escala aplicada ao conteúdo da janela de visualização.
Todos os navegadores de smartphones suportam as diretivas width e user-scalabel da tag ViewPort <meta>. Mas o Opera Mobile não usa a diretiva escalável pelo usuário, em vez disso argumenta que os usuários devem sempre manter a capacidade de ampliar páginas da web em navegadores móveis.
O seguinte é raramente usado. dispositivoPixelRatiowindow.devicePixelRatio é a proporção de pixels físicos para pixels independentes de dispositivo (dips) no dispositivo. A expressão da fórmula é: window.devicePixelRatio = pixels/dips físicos
tela adaptativa do site ajustada à telaSe o valor do conteúdo for menor ou igual à largura da tela, o ajuste da tela adaptável à tela do site será desativado. O site não será dimensionado com a extensão do navegador.
Se o valor do conteúdo for maior que a largura da tela será habilitado;
Relacionado ao navegador Apple08/07/2015
<meta nome=conteúdo da janela de visualização=minimal-ui>
No Safari no iOS 7.1, o atributo minimal-ui é adicionado à meta tag, para que a barra de endereço superior e a barra de navegação inferior possam ser ocultadas quando a página da web for carregada.
<meta name=apple-mobile-web-app-capable content=yes>
Se a função webapp deve ser ativada, o site excluirá a barra de ferramentas padrão da Apple e a barra de menu no modo de tela inteira.
<meta name=apple-touch-fullscreen content=yes>
Habilitar suporte para programas de aplicativos da web
<meta name=format-detection content=telephone=no><meta name=format-detection content=email=no />
O iPhone adicionará automaticamente um estilo de link ao seu texto e clicará no número para discar automaticamente o número!
phone=no ignora os números na página e os identifica como números de telefone
phone=yes ativa a conversão de números em links dial-up. Ele está ativado por padrão!
<meta name=apple-mobile-web-app-status-bar-style content=default /><meta name=apple-mobile-web-app-status-bar-style content=black /><meta name=apple- mobile-web-app-status-bar-style content=black-translucent />
Controlar o estilo de exibição da barra de status padrão (branco) preto (preto) preto-translúcido (cinza translúcido)
link tag apple-touch-íconeSe apple-mobile-web-app-capable estiver definido como sim, você pode usar o botão Adicionar à tela inicial para adicionar o site à tela inicial do iPhone, iPad e iTouch Safari.
Ao definir a tag apple-touch-icon correspondente, o ícone adicionado à tela inicial usará a imagem que especificamos.
A seguir, selecione um ícone ideal para diferentes dispositivos de boi. O tamanho padrão para iPhone é 60px, iPad é 76px e a tela retina é multiplicada por 2 vezes.
<link rel=apple-touch-icon href=touch-icon-iphone.png><link rel=apple-touch-icon size=76×76″ href=touch-icon-ipad.png><link rel=apple- tamanhos de ícones de toque=120×120″ href=touch-icon-iphone-retina.png><link rel=apple-touch-icon tamanhos = 152 × 152 ″ href = touch-icon-ipad-retina.png>
Antes do iOS7, o sistema adicionava efeitos especiais (cantos arredondados e realces) aos ícones por padrão. Se não quiser que o sistema adicione efeitos especiais, você pode usar apple-touch-icon-precomposed.png em vez de apple-touch-. ícone.png.
A prioridade de uso do ícone é a seguinte:Se não houver nenhum ícone que corresponda ao tamanho recomendado para o dispositivo correspondente, o ícone que for maior que o tamanho recomendado, mas mais próximo do tamanho recomendado, será usado primeiro.
Caso não existam ícones maiores que o tamanho recomendado, o ícone mais próximo do tamanho recomendado será escolhido primeiro.
Se houver vários ícones que atendam ao tamanho recomendado, o ícone que contém a palavra-chave pré-composta será selecionado primeiro.
Se você não especificar um ícone usando a tag de link na área, ele procurará automaticamente ícones png prefixados com apple-touch-icon no diretório raiz do site.
Nota: o ios7 não adiciona mais efeitos especiais aos ícones Antes do ios7, os efeitos especiais eram adicionados aos ícones por padrão, a menos que o ícone tivesse a palavra-chave -precomposed.png como sufixo. Internet Explorer <meta http-equiv=X-UA-Compatible content=IE=edge> Impedir que o IE use o modo de compatibilidade
<meta name=MobileOptimized content=320″> A tag de largura de definição definida pela Microsoft para a versão IE Mobile
O navegador não ajustará automaticamente o tamanho do arquivo, o que significa que ele tem um tamanho fixo e não será ampliado ou dimensionado com o navegador.
<meta name=HandheldFriendly content=true /> : Se é amigável para dispositivos portáteis, apenas verdadeiro ou falso
<meta name=screen-orientation content=portrait> Forçar tela vertical
<meta name=full-screen content=yes> Forçar tela cheia
<meta name=browsermode content=application> Modo de aplicativo
<meta name=x5-orientation content=portrait> Forçar tela vertical
<meta name=x5-fullscreen content=true> Forçar tela cheia
<meta name=x5-page-mode content=app> Modo de aplicativo
<meta name=renderer content=webkit> Ativar modo rápido
O meta refere-se ao elemento que fornece metainformações sobre a página, como descrições e palavras-chave para mecanismos de busca e frequência de atualização. A tag está localizada no cabeçalho do documento e não contém conteúdo. As propriedades de uma tag definem os pares nome/valor associados ao documento.
Quais são os recursos exclusivos da versão móvel?<meta conteúdo=largura=largura do dispositivo, escala inicial=1,0, escala máxima=1,0, escalonável pelo usuário=0 nome=porta de visualização> <meta conteúdo=sim nome=apple-mobile-web-app-capable> <meta content=black name=apple-mobile-web-app-status-bar-style> <meta content=telephone=no name=format-detection>
A primeira meta tag significa: forçar a largura do documento à largura do dispositivo para permanecer 1:1, e a proporção máxima de largura do documento é 1,0, e os usuários não podem clicar na tela para ampliar a visualização;
A segunda meta tag é a meta tag privada do Safari no dispositivo iPhone, que significa: permitir navegação em tela cheia;
A terceira meta tag também é uma tag privada do iPhone, que especifica o estilo da barra de status na parte superior do Safari no iPhone;
A cor da barra de status (barra superior da tela) em aplicativos web;
O valor padrão é padrão (branco), que pode ser definido como preto (preto) e preto translúcido (cinza translúcido).
Nota: Se o valor for preto translúcido, ele ocupará a posição px da página e flutuará acima da página (cobrirá a altura de 20px da página – a tela Retina do iphone4 e itouch4 tem 40px).A quarta meta tag significa: Diga ao dispositivo para ignorar os números da página como números de telefone.
Vamos dar uma olhada na meta das páginas mobile dos principais fabricantes: 1. Pequeno<meta name=aplus-terminal content=1/><meta name=apple-mobile-web-app-title content=TMALL/><meta name=apple-mobile-web-app-capable content=yes/><meta name=apple-mobile-web-app-status-bar-style content=black-translucent/><meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no/><meta name=format-detection content=telephone=no, address=no>2. Taobao
<meta charset=utf-8><meta content=yes name=apple-mobile-web-app-capable/> <meta content=yes name=apple-touch-fullscreen/> <meta content=telephone=no,email= no name=format-detection/> <meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/><meta name=viewport conteúdo = escala inicial = 0,5, escala máxima = 0,5, escala mínima = 0,5, escalonável pelo usuário = não>3. Jing Dong
<title>Versão Jingdong-Mobile</title><meta name=viewport content=width=device-width, escala inicial=1,0, escala máxima=1,0, escalonável pelo usuário=0;><meta http-equiv=Conteúdo -Tipo content=text/html; charset=GBK><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=format-detection content=telephone=no><meta http-equiv=Expira content=-1><meta http-equiv= Cache-Control content=no-cache><meta http-equiv=Pragma content=no-cache><meta name=Palavras-chave content=><meta name=description content=>4. NetEase
<title>NetEase Mobile</title><meta name=viewport content=width=device-width,initial-scale=1, escala máxima=1, escala mínima=1, escalável pelo usuário=no><meta conteúdo = telefone=sem nome=detecção de formato /><meta name=palavras-chave content= /><meta name=descrição content= />5.Baidu
<meta name=referrer content=always><meta charset=utf-8><meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no><meta nome=detecção de formato content=telefone=não>6. Sohu
<title>Mobile Sohu.com</title> <meta http-equiv=Content-Type content=text/html;><meta http-equiv=Cache-Control content=no-cache /><; meta name=viewport content=width=device-width, user-scalable=no, escala inicial=1,0, escala máxima=1,0, escala mínima=1,0 /><meta name=MobileOptimized content=320/><meta name=description content= /><meta name=keywords content= />
----
Simular página da web para celular<meta nome=conteúdo da janela de visualização=largura=largura do dispositivo,escalável pelo usuário=não, escala inicial=1,0, escala máxima=1,0, escala mínima=1,0″>
viewport -> janela (área de exibição)
largura=largura do dispositivo largura do dispositivo
janela de visualização<metaname = 'viewport' content = width=320><metaname = 'viewport 'content = width=device-width>
user-scalable=no/0 se deve permitir o escalonamento
escala inicial = 1,0 valor inicial
escala máxima = 1,0
escala mínima = 1,0
--------------------------
<meta name=viewport content=width=device-width, user-scalable=no>
user-scalable=no/0 impede que os usuários dimensionem a página
<meta nome=conteúdo da janela de visualização=largura=largura do dispositivo, escalável pelo usuário=não, escala inicial=1,0″>
escala inicial = 1,0 inicializar taxa de zoom da página
<nome meta = conteúdo da janela de visualização = largura = largura do dispositivo, escala inicial = 1,0, escala máxima = 1,0, escalonável pelo usuário = 0 ″>
escala máxima = taxa de escala máxima de 1,0 (para telefones celulares individuais Huawei Meta8)
--------------------------
Meta específica do dispositivo Apple:<!—Permitir que páginas da web sejam executadas como aplicativos (permitir adicionar à tela inicial)—><meta name=apple-mobile-web-app-capable content=yes><!—Cor da barra de status—><meta name=apple- mobile -web-app-status-bar-style content=black>Jingdong meta:
<meta name=viewport content=width=device-width, escala inicial=1,0, escala máxima=1,0, escalável pelo usuário=0″><meta name=apple-mobile-web-app-capable content=yes>< meta name=apple-mobile-web-app-status-bar-style content=black><!—Números de telefone e endereços de e-mail proibidos—><meta name=format-detection content=telefone=não,e-mail=não>Meta Taobao:
<meta content=yes name=apple-mobile-web-app-capable><!–Clique na área da página para exibir em tela cheia—><meta content=yes name=apple-touch-fullscreen/><meta content=telephone =não,e-mail =não nome=detecção de formato/><!–Informações do aplicativo, reter histórico do sistema, efeitos de movimento–><meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/>Outra meta:
<!–Force o 360 Browser a usar o kernel do Chrome para renderizar a página–><meta name=renderer content=webkit><!–Tente usar o modo mais recente do IE para renderizar–><meta http-equiv=X-UA -Compatible content=IE= edge><!–Otimizado para dispositivos portáteis, principalmente para alguns navegadores antigos que não reconhecem viewports, como BlackBerry–><meta name=HandheldFriendly content=true><!–Navegador antigo da Microsoft–><meta name=MobileOptimized content=320″><!– uc força tela vertical–><meta name=screen-orientation content=portrait><!– QQ força tela vertical –><meta name=x5-orientation content=portrait><!– UC força tela cheia–><meta name=tela inteira content=yes><!– QQ força tela cheia–><meta name=x5-fullscreen content=true><!– Modo de aplicativo UC–><meta name=browsermode content=application><!– Modo de aplicativo QQ–><meta name=x5-page- modo conteúdo = aplicativo>Resumir
O texto acima é todo o conteúdo deste artigo. Espero que o conteúdo deste artigo tenha certo valor de referência para o estudo ou trabalho de todos. Se você tiver alguma dúvida, pode deixar uma mensagem para comunicação. Rede.