{"id":1253,"date":"2020-02-14T16:31:36","date_gmt":"2020-02-14T19:31:36","guid":{"rendered":"https:\/\/www.souzahost.com\/tutoriais\/?p=1253"},"modified":"2021-06-02T07:55:15","modified_gmt":"2021-06-02T10:55:15","slug":"mudar-a-cor-do-browser-statusbar-de-acordo-com-seu-site-no-celular","status":"publish","type":"post","link":"https:\/\/www.holahost.com.br\/tutoriais\/mudar-a-cor-do-browser-statusbar-de-acordo-com-seu-site-no-celular\/","title":{"rendered":"Mudar a cor do browser (statusbar) de acordo com seu site no celular"},"content":{"rendered":"\n<p>Quer aprender a mudar a cor da <code>Statusbar<\/code>? Hoje trago uma dica incr\u00edvel de como aumentar mais a identifica\u00e7\u00e3o do seu site no celular.<\/p>\n\n\n\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\n\n\n<p>E se pud\u00e9ssemos transferir um pouco disso para o navegador aumentando mais a identifica\u00e7\u00e3o da cor do nosso site?<\/p>\n\n\n\n<p>Sim, isso \u00e9 poss\u00edvel de ser realizado nos navegadores de celulares atrav\u00e9s de meta tags espec\u00edficas.<\/p>\n\n\n\n<p>A partir da vers\u00e3o 39 do Chrome para o <code>Android Lollipop<\/code>, \u00e9 poss\u00edvel voc\u00ea mudar a cor do browser, alterando a cor da barra de navega\u00e7\u00e3o. Isso tamb\u00e9m \u00e9 poss\u00edvel no Safari \/ iOS e Windows Phone tamb\u00e9m, <em>sei l\u00e1 se ele volta!<\/em><\/p>\n\n\n\n<p>Cada navegador tem sua forma de implementa\u00e7\u00e3o. Veja abaixo as meta tags a serem utilizadas.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>Chrome no Android<\/h2>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;meta name=\"theme-color\" content=\"#75b529\"&gt;<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>Safari no iOS<\/h2>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<pre class=\"wp-block-preformatted EnlighterJSRAW\">&lt;meta name=\"apple-mobile-web-app-status-bar-style\" content=\"#75b529\"&gt;<\/pre>\n\n\n\n<h2>Windows Phone<\/h2>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<pre class=\"wp-block-preformatted EnlighterJSRAW\">&lt;meta name=\"msapplication-navbutton-color\" content=\"#75b529\"&gt;<\/pre>\n\n\n\n<h2>Veja o exemplo abaixo.<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/02\/Mudar-a-cor-do-browser-statusbar-de-acordo-com-seu-site-no-celular.jpeg\"><img src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/02\/Mudar-a-cor-do-browser-statusbar-de-acordo-com-seu-site-no-celular.jpeg\" alt=\"\" class=\"wp-image-1255\"\/><\/a><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\"><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.&nbsp;Espero que tenham gostado. Um abra\u00e7o e at\u00e9 a pr\u00f3xima.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Quer aprender a mudar a cor da Statusbar? Hoje trago uma dica incr\u00edvel de como aumentar mais a identifica\u00e7\u00e3o do seu site no celular. 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 transferir um pouco disso para [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5526,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[94],"tags":[63,64,65,66,67],"_links":{"self":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1253"}],"collection":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/comments?post=1253"}],"version-history":[{"count":1,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1253\/revisions"}],"predecessor-version":[{"id":5527,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1253\/revisions\/5527"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/media\/5526"}],"wp:attachment":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/media?parent=1253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/categories?post=1253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/tags?post=1253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}