修改手机浏览器地址栏和手机系统状态栏的主题颜色

在使用手机浏览网站的时候，如何做到手机的浏览器地址栏与手机状态栏的颜色与网站主题保持一致？下面通过一行代码实现手机地址栏与手机状态栏匹配网站主题颜色

最近注意到很多流行的网站，比如BBC，Facebook在用手机浏览器访问这些网站时，手机浏览器的地址栏颜色和手机系统状态栏的颜色都变成了这些网站的主题颜色，这使得这个显示界面的颜色搭配非常的好看。这篇文章里，我将介绍如何修改修改手机浏览器地址栏和手机系统状态栏的主题颜色，让它跟你的网站的颜色相匹配。

从安卓5.0、谷歌浏览器版本39开始，chrome浏览器上就新添加了使 theme-color 元标记修改主题颜色的功能。这有什么用处？

随着HTML5的进步发展，手机网页应用、自适应网页页面跟手机App的功能越来越接近，这个修改主题颜色的功能进一步使网页应用看起来像本地App应用

需要注意的是，目前只有谷歌浏览器又这样的功能。只可以谷歌浏览器修改地址栏颜色。

方法非常的简单，theme-color这个元标记就能实现功能， 我们只需要在网页的标记中间加入一个name="theme-color"的meta标记，content值设置为你制定的颜色，就像下面这行代码：

除此之外，如果你提供一个高分辨率的favicon，谷歌浏览器能优先使用这个更漂亮的图标，谷歌浏览器会选择分辨率最高的图标，官方推荐使用192×192px PNG图片，比如：

theme-color只在谷歌浏览器里起作用，如果你想在iphone的Safari和Windows Phone的IE里修改地址栏演示，参考下面的代码：

Safari 15 顶部状态栏的颜色这个功能是通过使用的 theme-color 这个 meta 标签来实现的。只要你在你的网页的头部加入下面这行代码即可：

如果你的网页支持暗黑模式，希望两种模式设置的顶部状态的颜色不同，可以加入一下两行代码：