修改手機瀏覽器網址列和手機系統狀態列的主題顏色

使用手機瀏覽網站的時候，如何做到手機的瀏覽器網址列與手機狀態列的顏色與網站主題一致？以下透過一行程式碼實現手機網址列與手機狀態列搭配網站主題顏色

最近注意到許多流行的網站，例如BBC，Facebook在用手機瀏覽器造訪這些網站時，手機瀏覽器的網址列顏色和手機系統狀態欄的顏色都變成了這些網站的主題顏色，這使得這個顯示介面的顏色搭配非常的好看。在這篇文章裡，我將介紹如何修改修改手機瀏覽器網址列和手機系統狀態列的主題顏色，讓它跟你的網站的顏色相符。

從安卓5.0、Google瀏覽器版本39開始，chrome瀏覽器上就新加入了讓theme-color 元標記修改主題顏色的功能。這有什麼用處？

隨著HTML5的進步發展，手機網頁應用程式、自適應網頁頁面跟手機App的功能越來越接近，這個修改主題顏色的功能進一步讓網頁應用程式看起來像是本地App應用

要注意的是，目前只有Google瀏覽器又這樣的功能。只可以Google瀏覽器修改網址列顏色。

方法非常的簡單，theme-color這個元標記就能實現功能， 我們只需要在網頁的標記中間加入一個name="theme-color"的meta標記，content值設定為你制定的顏色，就像下面這行程式碼：

除此之外，如果你提供一個高分辨率的favicon，谷歌瀏覽器能優先使用這個更漂亮的圖標，谷歌瀏覽器會選擇分辨率最高的圖標，官方推薦使用192×192px PNG圖片，比如：

theme-color只在Google瀏覽器裡起作用，如果你想在iphone的Safari和Windows Phone的IE裡修改網址列演示，請參考下面的程式碼：

Safari 15 頂部狀態列的顏色這個功能是透過使用的theme-color 這個meta 標籤來實現的。只要你在你的網頁的頭部加入下面這行程式碼即可：

如果你的網頁支援暗黑模式，希望兩種模式設定的頂部狀態的顏色不同，可以加入兩行程式碼：