2

Há alguns dias fiz um template em materializecss; hoje acessei do celular e percebi que ele não está ficando responsivo.

Vou deixar algumas prints para esclarecer melhor:

Responsivo (somente quando diminui o browser)

Responsivo (somente quando diminui o browser)

Não responsivo (quando acessado de um celular mesmo

Não responsivo (quando acessado de um celular mesmo)

Alguém saberia me dar uma luz do porque isto está acontecendo?

5
  • Isso pode ser por que a resolução do seu celular é muito grande, então ele pega o css de alta resolução e direciona para o pc. Você pode resolver isso diminuindo o range de resolução ao qual são atribuidas as propriedades de css para celular. Acho que fui claro
    – Tiago P.C
    17/12/2015 às 15:14
  • @TiagoP.C O pior é que simulei todos celulares no Chrome e deu o mesmo problema. Do meu Galaxy S3 mini que tem uma tela considerada pequena também ficou assim. Se quiser dar uma olhada: megamund-scofield17.c9users.io/index.html
    – lucatrex
    17/12/2015 às 15:19
  • Não parece que ficou errado, parece ok.. qual o problema? 17/12/2015 às 15:34
  • @SCOFIELD, tente colocar isso no head do seu html: <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    – Tiago P.C
    17/12/2015 às 15:38
  • Pronto @GuilhermeNascimento ;)
    – Tiago P.C
    17/12/2015 às 18:04

2 Respostas 2

3

Coloque o seguinte código no head do seu HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
3
  • Deve ser isto mesmo +1
    – Syzoth
    17/12/2015 às 18:19
  • Era isso mesmo @TiagoP.C eu pensei que não era necessário declarar o viewport com o materialize, me enganei. Agradecido!
    – lucatrex
    17/12/2015 às 20:19
  • Feliz em ajudar! ;)
    – Tiago P.C
    18/12/2015 às 15:33
0

Utilize media queries para fazer ajustes em determinadas resoluções: Ex.:

@media screen and ( max-width: 768px){
    .h2{
        font-size: 3.0em;
    }
}

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .