モバイルブラウザのアドレスバーとモバイルシステムのステータスバーのテーマカラーを変更する

携帯電話でウェブサイトを閲覧する場合、携帯電話のブラウザのアドレスバーと携帯電話のステータスバーの色をウェブサイトのテーマと一致させるにはどうすればよいでしょうか。次のコード行は、携帯電話のアドレスバーと携帯電話のステータスバーの間でウェブサイトのテーマの色を一致させるために使用されます。

最近、BBCやFacebookなど、多くの人気ウェブサイトにモバイルブラウザでアクセスすると、モバイルブラウザのアドレスバーと携帯電話のシステムステータスバーの色がこれらのウェブサイトのテーマカラーに変更され、表示インターフェースのカラーマッチングが非常に美しくなっていることに気づきました。この記事では、モバイルブラウザのアドレスバーと携帯電話のシステムステータスバーのテーマカラーをウェブサイトの色に合わせて変更する方法を紹介します。

Android 5.0およびGoogle Chromeバージョン39以降、Chromeブラウザにtheme-colorメタタグを使ってテーマカラーを変更できる機能が追加されました。これはどのような用途で役立ちますか？

HTML5の進化に伴い、モバイルWebアプリケーションやアダプティブWebページはますますモバイルアプリに似てきています。テーマカラーを変更できるこの機能により、Webアプリケーションはローカルアプリのような見た目になります。

この機能は Google Chrome のみに搭載されていることに注意してください。Google Chromeのアドレスバーの色を変更する。

方法はとても簡単です。theme-colorメタタグでこの機能を実現できます。次のコード行のように、タグの中央に name="theme-color" を含むメタ タグを追加し、コンテンツの値を指定した色に設定します。

さらに、高解像度のファビコンを指定した場合、Google Chrome はより美しいアイコンを優先的に表示します。Google Chrome は最も解像度の高いアイコンを選択します。公式推奨では、192×192ピクセルのPNG画像を使用することが推奨されています。例：

テーマカラーはGoogle Chromeでのみ機能します。iPhone SafariおよびWindows Phone IEのアドレスバーの表示を変更する場合は、以下のコードを参照してください。

Safari 15の上部ステータスバーの色は、theme-colorメタタグを使用して設定します。次のコード行をウェブページのヘッダーに追加するだけです。

Web ページがダーク モードをサポートしていて、2 つのモードでトップ ステータスを異なる色で設定する場合は、次の 2 行のコードを追加します。