O @media não funciona no celular, mas funciona no navegador desktop, por quê?
Você provavelmente acaba de descobrir o CSS responsivo e foi correndo aplicar o @media no seu CSS, aí você redimensionou a janela do Browser e vibrou com a conquista. Porém, quando publicou o site e testou no seu celular, não ficou responsivo como você esperava, certo?
O @media não funciona no celular?
Não é só porque o media query funciona quando você deixa a janela estreita, que no celular vai aparecer bonitinho.
Existe um elemento chave no HTML para que o @media funcione em dispositivos mobile, que é a meta tag viewport:
<meta name="viewport" content="width=device-width">Não esqueça que o <meta> deve ser colocado dentro do <head>.
Essa é a tag resumida, mas se você quiser saber detalhes do funcionamento dela, leia o post “meta viewport como usar“.
Agora, limpe o cache do seu smartphone ou tablet, e teste novamente. MAS CERTIFIQUE-SE de que limpou mesmo, porque sabemos que, limpar cache no celular não é tão rápido e simples quando no navegador Desktop.
Como limpar o cache?
Cada sistema operacional tem seu modo de apagar cache de aplicativos, não é muito complicado, mas também não é tão simples assim para qualquer pessoa.
No Canaltech tem um post detalhado ensinando como limpar o cache no Android. E no Techtudo, um post ensinando como limpar o cache no Iphone.
Se o seu sistema operacional for outro, o processo é parecido, então talvez os posts acima te ajudem a se encontrar.
Não esqueça de comentar se funcionou para ajudar os próximos que tiverem o mesmo problema.
Sou a Carla Da Silva, gostei muito do seu artigo tem muito
conteúdo de valor, parabéns nota 10.
Visite meu site lá tem muito conteúdo, que vai lhe ajudar.