Categories: Desenvolvimento

Mudar a cor do browser de acordo com seu site no mobile

5/5 - (2 votes)

Quer aprender a mudar a cor do browser? Então está no lugar certo! Hoje trago uma dica incrível de como aumentar mais  a identificação do seu site no mobile.

Quando é definida a identidade visual do nosso site, queremos que sempre tenha uma harmonia em tudo, seja nos posicionamentos ou nas cores.

E se pudéssemos transferir um pouco disso para o navegador aumentando mais a identificação da cor do nosso site?

Sim, isso é possível de ser realizado nos  navegadores de celulares através de meta tags específicas.

A partir da versão 39 do Chrome para o Android Lollipop, é possível você mudar a cor do browser, alterando a cor da barra de navegação. Isso também é possível no Safari e Windows Phone também.

Cada navegador tem sua forma de implementação. Veja abaixo as meta tags a serem utilizadas.

Mudar a cor do Browser – Para Chrome Browser Mobile

<meta name="theme-color" content="#75b529">

iOS Safari Browser Mobile

<meta name="apple-mobile-web-app-status-bar-style" content="#75b529">

Windows Phone Browser Mobile

<meta name="msapplication-navbutton-color" content="#75b529">

Veja o exemplo abaixo.

De fato, esta personalização pode trazer mais identidade do seu site e de sua marca, oferecendo aos seus usuários um aspecto totalmente personalizado.

Dica: 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ça nossos cursos online e decole sua carreira.

Espero que tenham gostado.

Um abraço e até a próxima.

David CHC

Trabalha com desenvolvimento web há 10 anos, atuou como programador líder do MX Cursos por mais de 8 anos e hoje dedica-se exclusivamente à criação de cursos para a plataforma. Possui vasto conhecimento em PHP, Javascript, HTML5, CSS3, Gulp.js, GIT, MySQL

Ver comentários

    • Oi Ezequiel, plugin não conheço, mas usando esse code aí é bem simples.

    • use o plugin insert headers and footer, cole os três códigos com sua cor escolhida no campo header, pronto

    • têm que colocar esta tag dentro de cada página que vc queira alterar

  • Poderiam me dizer em qual linha exatamente eu devo colocar o código?

    • Sempre tenho essas mesmas dúvidas, mas nesse caso aí em especial é sempre o mais fácil e procurando descobrir que fica no do seu tema se for tema wordpress por exemplo está em header.php você pode adicionar acima ou abaixo das meta tags exemplo: então ficaria assim:

      .... Conteúdo ....

Posts recentes

O Futuro da Criação de Sites: Integração de IA e Design Gráfico

Nos últimos anos, testemunhamos uma revolução na forma como os sites são criados, impulsionada pelo…

1 mês atrás

Como a IA Está Revolucionando a Animação 3D

A animação 3D tem sido uma forma poderosa de contar histórias e criar experiências visuais…

1 mês atrás

Lista das 20 Melhores Inteligências Artificiais em 2024 para Criação de Imagens (Todas Gratuitas)

Nos últimos anos, a inteligência artificial (IA) tem revolucionado a forma como criamos e editamos…

1 mês atrás

O Papel da Inteligência Artificial na Criação de Sites com WordPress

Nos últimos anos, a integração da inteligência artificial (IA) na criação de sites tem revolucionado…

2 meses atrás

5 Tendências em Edição de Vídeo Impulsionadas pela Inteligência Artificial

Nos últimos anos, a edição de vídeo evoluiu rapidamente com o avanço da tecnologia, e…

2 meses atrás

O Papel Revolucionário da Inteligência Artificial na Dublagem de Filmes

A dublagem de filmes desempenha um papel fundamental na indústria cinematográfica, permitindo que obras de…

2 meses atrás

This website uses cookies.