登录
  • 人们都希望被别人需要 却往往事与愿违
  • 如果建筑工人像程序员写软件那样盖房子, 那第一只飞来的啄木鸟就能毁掉人类文明@Gerald Weinberg (软件工程大牛)

让你的网站更具个性:WordPress下Android Chrome通知栏变色

建站运维 Benny小土豆 7547次浏览 522字 6个评论

让你的网站更具个性:WordPress下Android Chrome通知栏变色

在大家用Android版Chrome时,可能会发现有些时候通知栏会变色,举个Quora的栗子

让你的网站更具个性:WordPress下Android Chrome通知栏变色

感觉很搭很个性是不是!

其实想要支持这一特性,只要插入一个meta标签、并且设备的Chrome版本大于39、运行于Lollipop(Android 5.0)以后的版本,就可以完美支持这一特性啦!

对应的meta标签可以参考如下格式,其中content后面是颜色的十六进制表示:

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

将meta放到head后面就可以啦!

十六进制颜色可以用Photoshop的拾色器取出来。

对于WordPress来说,找到你主题的header.php,将上面的一行插入到它该有的地方,搜索下,放在其他meta下面就好啦~!

友情提示:header.php这个文件非常重要,修改之前备份一下更好!


顺路提一句,沉浸模式和通知栏变色是两个概念。

来看看我的效果图:

让你的网站更具个性:WordPress下Android Chrome通知栏变色

让你的网站更具个性:WordPress下Android Chrome通知栏变色

 

 

 

 

 

 

配色也是一门艺术啊!

本文参考资料:

https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android?hl=en


文章版权归原作者所有丨本站默认采用CC-BY-NC-SA 4.0协议进行授权|
转载必须包含本声明,并以超链接形式注明原作者和本文原始地址:
https://dmesg.app/chrome-theme-color.html
喜欢 (4)
分享:-)
关于作者:
If you have any further questions, feel free to contact me in English or Chinese.
发表我的评论
取消评论

                     

去你妹的实名制!

  • 昵称 (必填)
  • 邮箱 (必填,不要邮件提醒可以随便写)
  • 网址 (选填)
(6)个小伙伴在吐槽
  1. 注释一下 如果是Android 5.0(Lollipop)前的版本,就会是类似这个样子的:(以 https://ikk.me 为例)
    布偶君2017-06-11 11:14 回复
    • 没有5.0之前的设备给我用/(ㄒoㄒ)
      Benny小土豆2017-06-11 13:33 回复
      • 本来是有插图的,但是不知为何你的评论框把图吞了。。。 就这个,是用我的设备截图的:https://img.vim-cn.com/87/52dc24de3591cd20d17b414f31d74318f26dbe.png
        布偶君2017-06-11 13:38 回复
        • 评论框贴图貌似要点贴图按钮,不过也有可能被WordPress过滤…… 5.0之前对沉浸的支持还是有限啊……
          Benny小土豆2017-06-11 14:20
  2. 马克,回去加上去
    迎風别葉index2016-10-11 10:07 回复
    • 欢迎mark!
      Benny小土豆2016-10-11 10:13 回复