スマートフォンのブラウザのアドレスバーの色を変更する方法
スマートフォンのブラウザのアドレスバーの背景色を変更する方法について。 スマートフォン所有者ではなくサイト所有者向けの内容です。
方法としては HTML の head 内に所定のメタタグを追加するだけで OK です。
OS/ブラウザごとに方法が少しずつ異なりますが主流は次の方法です。
<meta name="theme-color" content="#4285f4">name 属性に theme-color を、 content に 16 進数表記の色を入れます。
こちらは Chrome / Opera / Firefox OS などのブラウザがサポートしています。
iOS の Safari の場合は以下の方法で指定することができます。
iOS Safari:
<!-- ただし色指定はできずデフォルトの色か黒かのどちらかしか指定できないようです -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">追記 2023/02/06: iOS の Safari は Safari 15 （ 2021/09 リリース）から上の theme-color タグをサポートしています。
ちなみに、フォアグラウンドのフォントカラーは指定できません。 背景色を設定するとそれをもとにブラウザが自動的にフォントカラーを設定するようです。
ささいなポイントですが、ブランドカラーなどが決まっているサイトなどではうまく使うと効果的かもしれません。
追記 2020/05/27
余談ですが、この theme_color という設定項目はサイトを PWAs （ Progressive Web Apps ）化するときの設定ファイル manifest.webmanifest にもあり、同様の意味合いを持っています。
manifest.webmanifest には background_color という項目もあって、こちらではホームスクリーンアイコンをクリックしてサイトを開いたときに表示されるスプラッシュスクリーンの背景色を指定することができます。