{"id":118,"date":"2021-06-22T00:28:02","date_gmt":"2021-06-22T03:28:02","guid":{"rendered":"https:\/\/fariart.com.br\/blog\/?p=118"},"modified":"2023-05-04T12:36:57","modified_gmt":"2023-05-04T15:36:57","slug":"media-nao-funciona-no-celular","status":"publish","type":"post","link":"https:\/\/fariart.com.br\/blog\/media-nao-funciona-no-celular\/","title":{"rendered":"@media n\u00e3o funciona no celular"},"content":{"rendered":"\n

O @media n\u00e3o funciona no celular<\/strong>, mas funciona no navegador desktop, por qu\u00ea?<\/p>\n\n\n\n

Voc\u00ea provavelmente acaba de descobrir o CSS responsivo<\/strong> e foi correndo aplicar o @media<\/strong> no seu CSS<\/strong>, a\u00ed voc\u00ea redimensionou a janela do Browser e vibrou com a conquista. Por\u00e9m, quando publicou o site e testou no seu celular, n\u00e3o ficou responsivo<\/strong> como voc\u00ea esperava, certo?<\/p>\n\n\n\n

\"@media<\/figure>\n\n\n\n

O @media n\u00e3o funciona no celular?<\/h2>\n\n\n\n

N\u00e3o \u00e9 s\u00f3 porque o media query<\/strong> funciona quando voc\u00ea deixa a janela estreita, que no celular vai aparecer bonitinho.
Existe um elemento chave no HTML<\/strong> para que o @media<\/strong> funcione em dispositivos mobile<\/strong>, que \u00e9 a meta tag viewport<\/strong>:<\/p>\n\n\n\n

<meta name="viewport" content="width=device-width"><\/code><\/pre><\/div>\n\n\n\n
N\u00e3o esque\u00e7a que o <meta><\/strong> deve ser colocado dentro do <head><\/strong>.<\/p>\n\n\n\n
Essa \u00e9 a tag<\/strong> resumida, mas se voc\u00ea quiser saber detalhes do funcionamento dela, leia o post “meta viewport como usar<\/a><\/strong>“.<\/p>\n\n\n\n
Agora, limpe o cache<\/strong> do seu smartphone<\/strong> ou tablet<\/strong>, e teste novamente. MAS CERTIFIQUE-SE<\/strong> de que limpou mesmo, porque sabemos que, limpar cache no celular<\/strong> n\u00e3o \u00e9 t\u00e3o r\u00e1pido e simples quando no navegador Desktop.<\/p>\n\n\n\n
Como limpar o cache?<\/h3>\n\n\n\n
Cada sistema operacional tem seu modo de apagar cache de aplicativos, n\u00e3o \u00e9 muito complicado, mas tamb\u00e9m n\u00e3o \u00e9 t\u00e3o simples assim para qualquer pessoa.<\/p>\n\n\n\n
No Canaltech<\/strong> tem um post detalhado ensinando como limpar o cache no Android<\/a><\/strong>. E no Techtudo<\/strong>, um post ensinando como limpar o cache no Iphone<\/a><\/strong>.<\/p>\n\n\n\n
Se o seu sistema operacional for outro, o processo \u00e9 parecido, ent\u00e3o talvez os posts acima te ajudem a se encontrar.<\/p>\n\n\n\n
N\u00e3o esque\u00e7a de comentar se funcionou para ajudar os pr\u00f3ximos que tiverem o mesmo problema.<\/p>\n","protected":false},"excerpt":{"rendered":"
O @media n\u00e3o funciona no celular, mas funciona no navegador desktop, por qu\u00ea? Voc\u00ea provavelmente acaba de descobrir o CSS responsivo e foi correndo aplicar o @media no seu CSS, a\u00ed voc\u00ea redimensionou a janela do Browser e vibrou com a conquista. Por\u00e9m, quando publicou o site e testou no seu celular, n\u00e3o ficou responsivo […]<\/p>\n","protected":false},"author":1,"featured_media":528,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[20,19,26],"tags":[29,15,14,28,30,25,27],"class_list":["post-118","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-desenvolvimento-web","category-html-desenvolvimento-web","category-responsivo","tag-celular","tag-css","tag-html","tag-metatag","tag-mobile","tag-responsivo","tag-viewport"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t