Para criar sites responsivos usando HTML5 é aconselhável for...
Gabarito comentado
Confira o gabarito comentado por um dos nossos professores
A alternativa correta é a Letra B, que apresenta a marcação correta para definir a viewport em uma página HTML5. Vamos entender o motivo pelo qual essa resposta é a correta:
A viewport é uma área virtual através da qual o usuário visualiza o conteúdo da página, e sua configuração é essencial para o design responsivo, pois permite que a página se ajuste adequadamente aos diferentes tamanhos de tela dos dispositivos. Para definir a viewport, utilizamos uma metatag dentro do <head> da página HTML.
A sintaxe correta dessa metatag é <meta name="viewport" content="atributos">, onde os atributos podem incluir width=device-width, que define a largura da viewport igual à largura do dispositivo, e initial-scale=1.0, que estabelece a escala inicial da página como 1, o que significa sem zoom.
A resposta correta, <meta name="viewport" content="width=device-width, initial-scale=1.0">, combina esses dois atributos essenciais para garantir que o site seja responsivo. Dessa forma, o navegador compreende que deve corresponder a largura da página com a do dispositivo e iniciar sem zoom, facilitando o design adaptável e a melhor experiência de usuário em dispositivos móveis.
As demais opções estão incorretas porque apresentam uma combinação de atributos inválidos, tags que não existem, ou uma sintaxe incorreta para a definição da viewport. Sendo assim, a alternativa B é a única que segue o padrão adequado para a configuração de uma viewport responsiva em HTML5.
Clique para visualizar este gabarito
Visualize o gabarito desta questão clicando no botão abaixo
Comentários
Veja os comentários dos nossos alunos
HTML5 introduziu um método para permitir que web designers assumir o controle sobre a janela, através da tag <meta>.
Você deve incluir o seguinte elemento de janela em todas as suas páginas da web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Um <meta> elemento dá as instruções do navegador sobre como controlar dimensões e escalonamento da página.
- width=device-width define a largura da página, para seguir a tela de largura do dispositivo (que irá variar dependendo do dispositivo).
- A initial-scale=1.0 define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador
<meta name="viewport"
:::::::Complementando:::::::
- O erro da letra D é a notação na escala de zoom usada. Ela tem que estar em decimal, não percentual. 1.0 é o zoom padrão. Podendo variar entre: 0.1 até 10. Outra observação: caso tenha valores negativos, eles são ignorados.
- Veja o que a letra D fez: ...initial-scale="100%...
Fonte: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
>>Seguimos>>
Erros na declaração original:
- type="viewport": Não é um atributo válido para a tag . Utiliza-se: name="viewport"
- initial-scale="100%: Não é utilizado um valor em percentual. Utiliza-se um valor numérico: initial-scale=1.0.
- max-width="100%: Não é um atributo válido.
Sintaxe correta:
<metaname="viewport"content="width=device-width, initial-scale=1.0">
Clique para visualizar este comentário
Visualize os comentários desta questão clicando no botão abaixo
Conheça nossos planos