facebook_pixel

Alterando a cor da Barra de Endereço do Chrome no Android

Publicado em 17/03/2016 às 20:09

A partir da versão 39 do Chrome no Android Lollipop, tornou-se possível o uso da meta tag “theme-color”. Com ela, nós conseguimos alterar a cor da Barra de Endereço do navegador, tornando o seu site mais atrativo e personalizado. Para isso, basta inserir o seguinte código dentro da tag <head>:

Lembrando que essa mudança serve apenas para dispositivos Android.

 

# Cor padrão da barra de endereço

Repare como é a cor padrão da barra de navegação do aplicativo Chrome no Android.

Barra de Endereço do Chrome padrão.

Barra de Endereço padrão.

# Alterando a cor da barra de endereço

Para alterar a cor da barra basta modificar o código (hexadecimal) da cor pela cor desejada. No exemplo de código acima, utilizamos a cor preta (#000) o que resultou na imagem abaixo.

Barra de Endereço do Chrome preta.

Barra de Endereço preta.

Você pode alterar o “content” de “#000” (preto) por qualquer outra cor, como por exemplo “#e14d43” (vermelho).

Barra de Endereço do Chrome vermelha.

Barra de Endereço vermelha.

É uma mudança simples, mas que dá um outro visual ao seu site em dispositivos móveis.

# Sites com a cor da Barra de Endereço alterada

Um dos sites em que nós da Mirago usamos esse código, foi o Espaçolaser. Com mais de 12 anos de experiência, a Espaço Laser é a melhor clínica de depilação a laser do Brasil! Nesse site, mudamos a cor da Barra de Endereço para rosa nas páginas sobre depilação feminina e azul nas demais páginas.

Outros sites que mudaram a cor da Barra de Endereço do Chrome (visível apenas no Android):

https://br.wordpress.com/com-vs-org/

http://g1.globo.com/

http://m.tecmundo.com.br/

https://www.terra.com.br/


E você, o que achou da alteração?

Fonte: https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android