Changing the header color of new mobile browsers

Hello dear friends. In this post I'm here with a very simple yet interesting tutorial from the world of web and mobile.

As you can see, the mobile industry has made remarkable progress today, and very interesting features are being built into smartphones. Mobile browsers haven't fallen behind either and are advancing, to the point that some features are being added to them that don't exist in desktop web browsers. One of these features, which I found interesting and decided to write a post about, is the ability to change the browser's header color from a web page.

This feature can be very pleasant for your users, because they feel their phone is in harmony with your site and they enjoy browsing it.

First, let's look at the normal state. In the picture below you can see the Wikipedia home page. If you look at the top of the browser (where the site's address is written), you'll see that the notification bar is black and the address bar is white:

Now let's look at another website that uses the mobile browser header color feature. For example, I went to the PureLink website and took a screenshot of its front page. As you can see, the notification bar and address bar have changed to purple:

This very simple change can be implemented with three lines of HTML code:

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">

As you can see in the comments, this code can be used for different browsers and phones, and you can put the color you want in the content attribute.

An important point to keep in mind is that this feature has only recently been added to mobile browsers, and older versions may not support it.

I hope you enjoyed this post, and if you have any comments, please share them.

Best of luck.