自定义Chrome浏览器地址栏颜色

你是否已经发现了,当你在移动端chrome浏览器上浏览某些网页时,在网页打开的瞬间,地址栏的颜色也随之改变了?地址栏的色彩与网页主题相搭配,显得既有美感又个性。就像下面这样:

theme-color.png

是否想过你的网站也可以拥有这个很酷的技能,而且只需要非常简单的设置。根据官网的指引,我们发现,只需在你的页面的<header></header>中间加入以下代码:

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

#4285f4替换为你需要的颜色,再重新载入你的网页,Bingo! 就这么简单。

更详细的内容可以参考官网说明



知识共享许可协议
除非注明,本博客文章均为原创
并采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。转载请以URL链接形式标注源地址。

标签: none

已有 4 条评论

  1. 哈哈,回访一下,这个很实用啊

    1. 感谢,这里收到的第一条评论,mark一下~

  2. 罗伯特 罗伯特

    然而大部分网页都没有适配~

  3. fffsdfjfff fffsdfjfff

    ☆══╗ ╔☆      ╔╗╔╗
    ╚╗╔╝ ║║╔═╦╦╦═☆ ║☆╝╠═╦╦╗  
    ╔╝╚╗ ║╚╣║║║║╠╣ ╚╗╔╣║║║☆
    ╚═☆╝ ╚═╩☆╩═╩═╝ ╚╝☆═╩═╝

添加新评论