Este blog explicará como usar uma meta tag viewport para web design responsivo em HTML:
O que é a metatag da janela de exibição?
O ' janela de exibição ” é a tag mais importante para criar um design responsivo, controlando como o conteúdo aparece em diferentes tamanhos de tela. Esta tag é colocada dentro do “
Diferentes atributos da meta tag da viewport
A meta tag viewport tem os seguintes atributos que podem ser colocados como um valor para o “ contente ” atributo:
atributo 'largura'
O ' largura ” especifica a área visível de uma página da Web para o conteúdo verticalmente. Sua meta tag se parece com isso:
< meta nome = 'janela de exibição' contente = 'largura = largura do dispositivo' >
atributo 'altura'
O ' altura ” define o comprimento vertical da página da Web para garantir que a altura da janela de visualização corresponda à altura da tela. Sua meta tag se parece com isso:
< meta nome = 'janela de exibição' contente = 'altura = 400' >
Atributo 'escala inicial'
O ' escala inicial ” garante que a página da Web seja exibida em um nível de zoom apropriado quando carregada pela primeira vez. Por exemplo, visite o código abaixo:
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1,0' >atributo de “escala máxima”
O ' escala máxima ” especifica o nível máximo de zoom para a página da Web para evitar problemas de layout:
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala máxima=1,0' >
atributo de “escala mínima”
O ' escala mínima ” é utilizado para impedir que o usuário reduza muito o zoom, especificando o nível mínimo de escala de redução do zoom:
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala mínima=0,5' >atributo “escalável pelo usuário”
O ' escalável pelo usuário ” permite ou não permitir que o usuário reduza ou amplie a tela da página da Web definindo o valor como “ Não ' ou ' sim ”. A meta tag que permite ao usuário aumentar ou diminuir o zoom é:
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, dimensionável pelo usuário=sim' >Como usar a meta tag Viewport para Web design responsivo em HTML?
Para entender melhor o uso de uma metatag de viewport para web design responsivo. Passemos por um exemplo:
Suponha que dentro do “ Após a compilação do trecho de código acima, a página da Web fica assim: A saída mostra que o conteúdo não é responsivo, pois não está sendo exibido perfeitamente em dispositivos pequenos. Agora, para torná-lo responsivo, adicione o “ janela de exibição ” meta tag: Depois de atualizar o código, a página da Web fica assim em diferentes tamanhos de tela: A saída final ilustra que a página da Web agora é responsiva após a adição de uma metatag dentro do “ A meta tag viewport permite que o desenvolvedor forneça um conjunto de instruções para o navegador que define como a página da Web é exibida em diferentes dispositivos de tamanho de tela. A meta tag é colocada dentro do “ ' marcação: < div >
< p >
< b >Desenvolvido por Linuxhint, para entender melhor a meta tag viewport, abra a página da Web em uma tela diferente tamanho dispositivos.< / b >
< / p >
< img origem = '../bg.jpg' tudo = 'Hacker' largura = '460' altura = '3.4.5' >
< p estilo = 'preenchimento: 5px' >
< eu >Junte-se à Equipe Linuxhint < / eu >
Desenvolvido por Linuxhint, para entender melhor a meta tag viewport, abra a página da Web em uma tela diferente tamanho devices.Powered by Linuxhint, para entender melhor a meta tag viewport, abra a página da Web em uma tela diferente tamanho devices.Powered by Linuxhint, para entender melhor a meta tag viewport, abra a página da Web em uma tela diferente tamanho devices.Powered by Linuxhint, para entender melhor a meta tag viewport, abra a página da Web em uma tela diferente tamanho dispositivos.
< / p >
< / div >
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1,0' / >
< / cabeça >
Conclusão