网站适配手机浏览器地址栏变色的方法

此文章能够帮助你让你的网站与浏览器融合变得更加美观(强迫症福音

一般情况下,多数没有经过适配的网站显示状况如下图显示:

然而,在网页中加入:

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

之后,浏览器就会根据这个标签进行设置。

成品如下:

以上是使用 Google Chrome 浏览器的效果(39版本后)。

其他浏览器可能会在其他控件的配色上也参考此值,如下图的三星浏览器,下方的主页、书签等按键也根据标签变色:

不过据本文发布之日,已知UC浏览器,华为自带浏览器不支持此标签。其他浏览器并未测试,大家可以自行打开手机浏览器访问本站或其他已经适配的网站进行体验。


评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据