Aula 010 - Header Responsivo - Versão mobile não fica responsivo

CollabCodeTech / forum-do-front-ao-end

Fórum da turma do curso do Front ao End

80 stars 10 forks source link

Aula 010 - Header Responsivo - Versão mobile não fica responsivo #91

Closed Morette closed 5 years ago

Morette commented 5 years ago

Na parte do vídeo em que o Marco muda para ver se cabe na tela do Iphone 6 e percebi que aqui no meu ele não ficou responsivo, apenas reduziu o zoom da tela.

Na versão desktop está ok.

eudes-silva commented 5 years ago

Bom dia @Morette . A pagina do responsivo pode não estar atualizando corretamente, como aconteceu comigo. Indico verificar novamente pois a página se comporta normal quando diminui com a versão Desktop, então está correto. Bons estudos.

Morette commented 5 years ago

A pagina do responsivo pode não estar atualizando corretamente, como aconteceu comigo.

Eu pensei nisso. Fechei a página, abri um novo live server e até abrindo o arquivo html e continuou a mesma coisa. Minha dúvida é como resolver. 😞

eudes-silva commented 5 years ago

Vc já subiu estes códigos? Posso ajudar, mas somente vendo o que está acontecendo.

eudes-silva commented 5 years ago

Verifique tb se esta meta está dentro do teu head:


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

Morette commented 5 years ago

Opa, subi sim. Repositório

eudes-silva commented 5 years ago

É a tag meta mesmo, insira dentro da tag head

Morette commented 5 years ago

Valeu! Resolveu aqui.

Wanhenri commented 5 years ago

@EudesJS Qual seria a finalidade da tag meta ?? Estou finalizando hoje a aula 10 e vi essa dúvida. No meu não deu esse problema; é mais para uma questão de aprendizado mesmo. Muito obrigado.

eudes-silva commented 5 years ago

Opa Wanderson, tudo bem? A tag meta viewport indica ao browser como controlar as dimensões e escala da página em dispositivos com telas menores. Sem esta instrução a página apenas diminui o zoom para adaptar o conteúdo. A parte do content....device=device-width estipula que a largura da tela siga a largura da tela do dispositivo utilizado. Initial-scale=1.0 indica a escala de zoom inicial quando a tela for carregada....esta parte do scale é necessária devido à diferença entre pixels lógicos e físicos. Verifique novamente se tudo funciona corretamente ao redimensionar, pois como estamos trabalhando com conteúdo responsivo esta tag é indispensável.

Wanhenri commented 5 years ago

Interessante essas informações.

Muito obrigado pelo esclarecimento.