How to change top address bar color in mobile web browsers - CSS
How can I change the color of top address bar in mobile web browsers, when someone visits my website ? For example like when I visit Facebook on my phone, the color of web browser's top bar will change to blue.
Hi,
You can change the color of top address bar in mobile web browsers by adding Meta tags between <head></head>, instead of using CSS. Because there are multiple mobile web browsers available, there are different meta tags used for some browsers, to customize the address bar color.
This solution works with standard Android web browsers like Firefox, Chrome or Opera:
<meta name="theme-color" content="#007ad5">
This solution works with Safari, that is used mostly on iOS devices like iPhones or iPads:
<meta name="apple-mobile-web-app-status-bar-style" content="#007ad5">
You can change the color of top address bar in mobile web browsers by adding Meta tags between <head></head>, instead of using CSS. Because there are multiple mobile web browsers available, there are different meta tags used for some browsers, to customize the address bar color.
This solution works with standard Android web browsers like Firefox, Chrome or Opera:
<meta name="theme-color" content="#007ad5">
This solution works with Safari, that is used mostly on iOS devices like iPhones or iPads:
<meta name="apple-mobile-web-app-status-bar-style" content="#007ad5">
1 answer
Related questions
Smooth move of HTML elements - animation with CSS
Set CSS/HTML opacity - transparent background but not text
HTML list <ul> not showing items <li> on a new line
Add custom HTML to wordpress widget - Tag script is not allowed
Disabled HTML input field no value sending - how to get value ?
Wordpress plan for editing theme pages - HTML, CSS, PHP source code
Convert RGB colors from Windows Paint to HTML Hex code format
Trending questions
How to calculate inverse currency exchange rate ? Is PLS LCD display good ? Difference between PLS LCD and Amoled Samsung Galaxy A & F better than M series ? What's the difference ? How to change QWERTZ keyboard to QWERTY in Windows 10 ? How to add side by side rows in excel pivot table ? Remove or hide bottom navigation bar with buttons on Android Man Month calculation - how many man days or man hours ?
How to calculate inverse currency exchange rate ? Is PLS LCD display good ? Difference between PLS LCD and Amoled Samsung Galaxy A & F better than M series ? What's the difference ? How to change QWERTZ keyboard to QWERTY in Windows 10 ? How to add side by side rows in excel pivot table ? Remove or hide bottom navigation bar with buttons on Android Man Month calculation - how many man days or man hours ?
2024 AnswerTabsTermsContact us