{"id":3337,"date":"2016-05-27T08:00:16","date_gmt":"2016-05-27T11:00:16","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=3337"},"modified":"2019-03-26T11:12:06","modified_gmt":"2019-03-26T14:12:06","slug":"mudando-cor-do-browser-de-acordo-com-seu-site-no-mobile","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/mudando-cor-do-browser-de-acordo-com-seu-site-no-mobile\/","title":{"rendered":"Mudar a cor do browser de acordo com seu site no mobile"},"content":{"rendered":"<p>Quer aprender a <strong>mudar a cor do browser<\/strong>? Ent\u00e3o est\u00e1 no lugar certo! Hoje trago uma dica incr\u00edvel de como aumentar mais \u00a0a identifica\u00e7\u00e3o do seu site no <a href=\"https:\/\/www.mxcursos.com\/blog\/tags\/mobile\/\">mobile<\/a>.<\/p>\n<p>Quando \u00e9 definida a identidade visual do nosso site, queremos que sempre tenha uma harmonia em tudo, seja nos posicionamentos ou nas cores.<\/p>\n<p>E se pud\u00e9ssemos transferir um pouco disso para o navegador aumentando\u00a0mais a identifica\u00e7\u00e3o da cor do nosso site?<\/p>\n<p>Sim, isso \u00e9 poss\u00edvel de ser realizado nos \u00a0navegadores de celulares atrav\u00e9s de\u00a0meta tags espec\u00edficas.<\/p>\n<p>A partir da vers\u00e3o 39 do Chrome para o Android Lollipop, \u00e9 poss\u00edvel voc\u00ea <strong>mudar a cor do browser<\/strong>, alterando a cor da barra de navega\u00e7\u00e3o. Isso tamb\u00e9m \u00e9 poss\u00edvel no Safari e Windows Phone tamb\u00e9m.<\/p>\n<p>Cada navegador tem sua forma de implementa\u00e7\u00e3o. Veja abaixo\u00a0as meta tags a serem utilizadas.<\/p>\n<h2><strong>Mudar a cor do Browser &#8211; Para Chrome Browser Mobile<\/strong><\/h2>\n<pre class=\"lang:xhtml decode:true \">&lt;meta name=\"theme-color\" content=\"#75b529\"&gt;<\/pre>\n<h2><strong>iOS Safari Browser Mobile<\/strong><\/h2>\n<pre class=\"lang:xhtml decode:true \">&lt;meta name=\"apple-mobile-web-app-status-bar-style\" content=\"#75b529\"&gt;<\/pre>\n<h2><strong>Windows Phone Browser Mobile<\/strong><\/h2>\n<pre class=\"lang:xhtml decode:true \">&lt;meta name=\"msapplication-navbutton-color\" content=\"#75b529\"&gt;<\/pre>\n<p>Veja o exemplo abaixo.<\/p>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/05\/mobile2.jpg\"><img decoding=\"async\" class=\"aligncenter wp-image-3339 size-full\" title=\"Mudar a cor do browser\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/05\/mobile2.jpg\" alt=\"Mudar a cor do browser\" width=\"261\" height=\"469\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/05\/mobile2.jpg 261w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/05\/mobile2-13x24.jpg 13w\" sizes=\"(max-width: 261px) 100vw, 261px\" \/><\/a><\/p>\n<p>De fato, esta personaliza\u00e7\u00e3o pode trazer mais identidade do seu site e de sua marca, oferecendo aos seus usu\u00e1rios um aspecto totalmente personalizado.<\/p>\n<p><strong>Dica:<\/strong> Quer se especializar ou potencializar seus conhecimentos em Desenvolvimento Front-End e dominar tecnologias e linguagens como HTML5, CSS3, Javascript, jQuery, Bootstrap, entre outros? Conhe\u00e7a <a href=\"https:\/\/www.mxcursos.com\/front-end?tracking=blog&amp;utm_source=blog&amp;utm_medium=post_link&amp;utm_content=marketing\" target=\"_blank\" rel=\"noopener noreferrer\">nossos cursos online<\/a> e decole sua carreira.<\/p>\n<p>Espero que tenham gostado.<\/p>\n<p>Um abra\u00e7o e at\u00e9 a pr\u00f3xima.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quer aprender a mudar a cor do browser? Ent\u00e3o est\u00e1 no lugar certo! Hoje trago uma dica incr\u00edvel de como aumentar mais \u00a0a identifica\u00e7\u00e3o do seu site no mobile. Quando \u00e9 definida a identidade visual do nosso site, queremos que sempre tenha uma harmonia em tudo, seja nos posicionamentos ou nas cores. E se pud\u00e9ssemos [&hellip;]<\/p>\n","protected":false},"author":67,"featured_media":18850,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[1273,1213],"class_list":["post-3337","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-browser","tag-mobile"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/3337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=3337"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/3337\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/18850"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=3337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=3337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=3337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}