从安卓5.0(Lollipop)、谷歌浏览器版本39开始,chrome浏览器上就新添加了使theme-color元标记修正主题颜色的功能。这有什么用途?随着HTML5的进步发展,手机网页运用、自适应网页页面跟手机App的功能越来越靠近,这个修正主题颜色的功能进一步使网页运用看起来像本地App运用,看一看实际效果图
首先是没有修正颜色前的截图:
把稳浏览器的地址栏是灰色的,这是谷歌浏览器的缺省主题颜色,而手机系统关照栏的颜色是玄色的。
这是修正主题颜色后的截图。
此时浏览器的地址栏变成了蓝色,而手机关照栏的颜色变成了深蓝色,这些颜色跟网页的颜色非常的匹配,用户体验好多了。
不过,须要把稳的是,目前只有谷歌浏览器又这样的功能。
方法非常的大略,theme-color这个元标记就能实现功能, 我们只须要在网页的<head></head>标记中间加入一个name=\"大众theme-color\"大众的meta标记,content值设置为你制订的颜色,就像下面这行代码:
除此之外,如果你供应一个高分辨率的favicon,谷歌浏览器能优先利用这个更俊秀的图标,谷歌浏览器会选择分辨率最高的图标,官方推举利用192×192px PNG图片,比如:
theme-color只在谷歌浏览器里起浸染,如果你想在iphone的Safari和Windows Phone的IE里修正地址栏演示,参考下面的代码:
切图 qietu(.com)