DÊVIDAS COM ATRIBUTOS DA TAG <META>
Olá a todos!
Estou com dúvida referente à s as linhas da tag <meta>. A única forma a qual usava esta tag era para definir o unicode da página com o atributo charset, mas estudando Bootstrap me deparei com mais essas duas linhas com atributos e atribuições diferentes name=[Ô]description[Ô], name=[Ô]viewport[Ô], content=[Ô]width=device-width, initial-scale=1[Ô] que eu ainda não conhecia. Alguém sabe explicar o uso delas?
Grata desde já!
Estou com dúvida referente à s as linhas da tag <meta>. A única forma a qual usava esta tag era para definir o unicode da página com o atributo charset, mas estudando Bootstrap me deparei com mais essas duas linhas com atributos e atribuições diferentes name=[Ô]description[Ô], name=[Ô]viewport[Ô], content=[Ô]width=device-width, initial-scale=1[Ô] que eu ainda não conhecia. Alguém sabe explicar o uso delas?
<meta name=[Ô]description[Ô] content=[Ô]Curso Bootstrap[Ô]/>
<meta name=[Ô]viewport[Ô] content=[Ô]width=device-width, initial-scale=1[Ô]/>Grata desde já!
A tag [Ô]<meta>[Ô] é uma maneira de [Ô]descrever[Ô] o documento HTML. A maioria das técnicas de SEO são baseadas nessas tags. Elas não aparecem no documento, mas podem definir o comportamento(como o charset que você mencionou) e são verificáveis por métodos automáticos(que é o que o SEO espera que seja feito). O Google por exemplo, além de outras coisas, verifica essas tags para indexação da sua página.
Quanto à s tags que você mencionou:
Viewport: é relativo ao tamanho da [Ô]área visÃvel[Ô], é um dos responsáveis para que páginas HTML tenham um visual [Ô]fluido[Ô]. Para testar isso, coloque essa tag, alguns divs com tamanho em percentual e então mude o tamanho da janela do navegador...
Description: é uma das tags verificadas por sistemas de SEO(como o google), é uma das descrições que serão incluÃdas na busca do google.
Existem várias opções para essa tag. Ela é uma das mais importantes e das mais ignoradas por iniciantes.
Quanto à s tags que você mencionou:
Viewport: é relativo ao tamanho da [Ô]área visÃvel[Ô], é um dos responsáveis para que páginas HTML tenham um visual [Ô]fluido[Ô]. Para testar isso, coloque essa tag, alguns divs com tamanho em percentual e então mude o tamanho da janela do navegador...
Description: é uma das tags verificadas por sistemas de SEO(como o google), é uma das descrições que serão incluÃdas na busca do google.
Existem várias opções para essa tag. Ela é uma das mais importantes e das mais ignoradas por iniciantes.
Esse Kerplunk manja da porra toda mesmo! hahahaha tá louco...
o [Ô]viewport[Ô] controla o como o navegador mobile vai exibir a página, ele não possui nenhum efeito em navegadores desktop.
Por padrão um navegador mobile mostra a página como se o tamanho da janela fosse maior do que ele realmente é, por exemplo meu celular possui uma resolução de 720x1280, porém sem o viewport se eu criar uma página e tentar pegar o tamanho da janela por script ele me diz que a página tem 980 pixels de largura, e desta forma todos os textos ficam bem pequenos, sendo que sou praticamente obrigado a dar zoom na página para conseguir ler.
Já se coloco o meta viewport da forma como você postou, quando abro a página com o script para verificar o tamanho da janela ele me retorna que ele é 360 pixels, assim o texto fica grande e fácil de ler.
Além disso, se você costuma usar o navegador no celular provavelmente já deve ter encontrado sites em que não se pode dar zoom no celular, isso também é controlado por ele, adicionando o maximum-scale na tag
<meta name=[Ô]viewport[Ô] content=[Ô]width=device-width, initial-scale=1, maximum-scale=1[Ô]/>
De forma que a escala inicial é 1 e a máxima também é 1 então fica desativado o zoom.
Essa tag é bastante usada em sites responsivos, onde é esperado que a janela seja menor em um celular, e a maioria dos frameworks como o bootstrap recomenda o uso para que o sistema de grids deles funcione corretamente em celulares, pois eles esperam que a janela seja menor no celular, e sem essa tag o navegador simularia uma janela maior do que a tela.
Por padrão um navegador mobile mostra a página como se o tamanho da janela fosse maior do que ele realmente é, por exemplo meu celular possui uma resolução de 720x1280, porém sem o viewport se eu criar uma página e tentar pegar o tamanho da janela por script ele me diz que a página tem 980 pixels de largura, e desta forma todos os textos ficam bem pequenos, sendo que sou praticamente obrigado a dar zoom na página para conseguir ler.
Já se coloco o meta viewport da forma como você postou, quando abro a página com o script para verificar o tamanho da janela ele me retorna que ele é 360 pixels, assim o texto fica grande e fácil de ler.
Além disso, se você costuma usar o navegador no celular provavelmente já deve ter encontrado sites em que não se pode dar zoom no celular, isso também é controlado por ele, adicionando o maximum-scale na tag
<meta name=[Ô]viewport[Ô] content=[Ô]width=device-width, initial-scale=1, maximum-scale=1[Ô]/>
De forma que a escala inicial é 1 e a máxima também é 1 então fica desativado o zoom.
Essa tag é bastante usada em sites responsivos, onde é esperado que a janela seja menor em um celular, e a maioria dos frameworks como o bootstrap recomenda o uso para que o sistema de grids deles funcione corretamente em celulares, pois eles esperam que a janela seja menor no celular, e sem essa tag o navegador simularia uma janela maior do que a tela.
Faça seu login para responder