網頁開發

設定 Android 手機版 Chrome 瀏覽器工具列顏色,配合網頁佈景主題

Android 手機版的 Chrome 瀏覽器可以透過網頁設定工具列的顏色,讓手機的畫面與網頁的佈景主題一致,看起來更美觀。

一般手機瀏覽器的工作列顏色都是固定的,而現在 Android 手機版的 Chrome 瀏覽器從第 39 版之後,開始支援從網頁中指定佈景主題顏色的功能,這個簡單的小功能可以讓網站看起來更專業,也更漂亮,以下是設定的方法教學。


如果用手機瀏覽一般的網頁,畫面會像這樣,不管觀看哪一個網站,瀏覽器上方的工作列始終都是灰色的。

手機瀏覽網頁

現在我們可以藉由新的佈景主題顏色功能,在網頁中指定 Chrome 瀏覽器工作列的背景顏色,設定的方法很簡單,只要在網頁的 <head> 中加入一行:

<meta name="theme-color" content="#db5945">

其中 content 的值就填入想要指定的顏色,這樣手機版的 Chrome 瀏覽器就會自動將工具列的背景改成這個顏色,以下是兩個使用 theme-color 網站看起來的效果。

手機版 Chrome 瀏覽器指定工具列顏色

跟網頁的主題顏色搭配之後,會讓人感覺更美觀,也更專業。

參考資料:Google DevelopersARJUN U.

G. T. Wang

個人使用 Linux 經驗長達十餘年,樂於分享各種自由軟體技術與實作文章。

Share
Published by
G. T. Wang
標籤: AndroidChrome

Recent Posts

光陽 KYMCO GP 125 機車接電發動、更換電瓶記錄

本篇記錄我的光陽 KYMCO ...

1 年 ago

[開箱] YubiKey 5C NFC 實體金鑰

本篇是 YubiKey 5C ...

2 年 ago

[DIY] 自製竹火把

本篇記錄我拿竹子加上過期的苦茶...

2 年 ago