August 7, 2016

How to change the color of address bar in mobile browser to match your website

How to change the color of address bar in mobile browser to match your website

Nowadays most of the websites are responsive websites. This makes your site looks great on mobile devices. However, it still looks and feels like a website. Matching the color of address bar to your website, gives it a native app-like feel. This improves user experience.

Simply add the below meta tag to head section of your page.

HTML

<!-- Chrome, Firefox OS, 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">

The content field has the hex code for the color you want to use as theme color.

Note:

I have tested this with android phones alone.

demo

No comments:

Post a Comment

Popular Posts

Views