最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【整理】HTML中meta theme-color的含义

HTML crifan 12013浏览 0评论

见到Preact中的html模板中有写到:

<meta name=”theme-color” content=”#673ab8”>

想要搞清楚其含义。

去搜:

meta theme-color

图标和浏览器颜色  |  Web  |  Google Developers

Support for theme-color in Chrome 39 for Android  |  Web  |  Google Developers

html – How to change the color of header bar and address bar in newest Android Chrome version on Lollipop? – Stack Overflow

[Tutorial] Adding a theme-color to browser toolbar (Chrome for Android only) – YOOtheme

【总结】

“当用户访问您的网页时,浏览器会尝试从 HTML 提取图标。图标可能出现在许多地方,包括浏览器标签、最近的应用切换、新的(或最近访问的)标签页面等。”

-》而Android手机中浏览器Chrome,就支持这类功能。

-》允许你在html中定义对应的:

theme-color:主题颜色

等等,可以实现,顶栏header bar和地址栏address bar的多彩的颜色

效果类似于这种:

注:

另外类似的,也支持定义

icon:图标

用于不同浏览器。

对应的是:

Chrome:

<!– icon in the highest resolution we need it for –>
<link rel=”icon” sizes=”192×192″ href=”icon.png”>
<!– reuse same icon for Safari –>
<link rel=”apple-touch-icon” href=”ios-icon.png”>
<!– multiple icons for IE –>
<meta name=”msapplication-square310x310logo” content=”icon_largetile.png”>

Safari:

<link rel=”apple-touch-icon” href=”touch-icon-iphone.png”>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”touch-icon-ipad.png”>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”touch-icon-iphone-retina.png”>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”touch-icon-ipad-retina.png”>

IE 和 Windows Phone

<meta name=”msapplication-square70x70logo” content=”icon_smalltile.png”>
<meta name=”msapplication-square150x150logo” content=”icon_mediumtile.png”>
<meta name=”msapplication-wide310x150logo” content=”icon_widetile.png”>

【总结】

此处,对于theme color,去设置为:

<!– Theme Color –>
<!– Chrome, Firefox OS and Opera –>
<meta name=”theme-color” content=”#673ab8″>
<!– Windows Phone –>
<meta name=”msapplication-navbutton-color” content=”#673ab8″>
<!– iOS Safari –>
<meta name=”apple-mobile-web-app-status-bar-style” content=”#673ab8″>

待后续看看效果。

【后记】

【整理】web的app中的manifest.json的作用和参数含义

转载请注明:在路上 » 【整理】HTML中meta theme-color的含义

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. The iOS "apple-mobile-web-app-status-bar-style" attribute only supports "black", "black-translucent" or "default" - you cannot use a custom color.
    Annun6年前 (2018-09-27)回复
92 queries in 0.209 seconds, using 22.07MB memory